0

I've this html which i'm sending as a mail (see fiddle) in which i use 2 external images (one for the company logo and one for the table background) : :

http://jsfiddle.net/UTSnK/

<img src="http://www.hawkaviation.com/assets/static-header.jpg" alt="Hawk Aviation""/></a>

<table border="0" cellspacing="0" cellpadding="0" style="background:rgba(55, 20, 240, 0.99) url('http://www.hisplaceautorepair.com/images/auto/Primary_Images/napa_bg.jpg'); padding: 38px">

I send it from code to many email clients : gmail, yahoo, ios. Only in outlook client the pictures are not presented: enter image description here

How can I overcome it? Is this related to the way I'm sending it (via c# code) or the way the images are linked to the html?

I'd appreciate a step by step answer. Regards, Omer.

Community
  • 1
  • 1
omer bach
  • 2,345
  • 5
  • 30
  • 46
  • The main image displays fine for me. But most clients (Hotmail/Outlook) don't support background images. – Nick R Jul 08 '13 at 14:02
  • so whats the alternative ? – omer bach Jul 08 '13 at 14:02
  • Don't use background images. Also this is wrong `Hawk Aviation` 2 double quotes on the `alt` tag and a random closing `` tag at the end. – Nick R Jul 08 '13 at 14:03
  • @NickR - Outlook.com and desktop versions do support background images, it's just a slight pain in the ass to code. Thankfully Campaign Monitor came out with an [online generator](http://www.campaignmonitor.com/blog/post/3920/bulletproof-background-images-and-buttons-email-newsletters) that makes it simple. – CherryFlavourPez Jul 08 '13 at 14:21

2 Answers2

1

You are having this problem because outlook isn't rendering the external images without the user clicking download on the images or they don't have option to automatically download external images selected.

The way you fix this is that you have to embed the images into the email message.

To embed an image you have to use and AlternatView object and a LinkedResource object.

You can find example code on how to do this at: How to embed multiple images in email body using .NET

Community
  • 1
  • 1
Avitus
  • 15,640
  • 6
  • 43
  • 53
1

This is how I got this working in Outlook

private MailMessage report = new MailMessage();

...

if (this.report.IsBodyHtml)
{
            AlternateView htmlView = AlternateView.CreateAlternateViewFromString(this.bodyText.ToString(), this.report.BodyEncoding, "text/html");

            LinkedResource headerImageLink = new LinkedResource(ConfigReader.GetConfigValue("ImageLocation") + "\\MyBanner.gif", "image/gif");
            headerImageLink.ContentId = "headerImageId";
            headerImageLink.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;

            LinkedResource footerImageLink = new LinkedResource(ConfigReader.GetConfigValue("ImageLocation") + "\\horizontal_c.gif", "image/gif");
            footerImageLink.ContentId = "footerImageId";
            footerImageLink.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;

            htmlView.LinkedResources.Add(headerImageLink);
            htmlView.LinkedResources.Add(footerImageLink);

            this.report.AlternateViews.Add(htmlView);
}

The HTML to reference the above image is:

<IMG src=\"cid:headerImageId\"/>

the headerImageId refers to the ContentId of the LinkedResource.

Basically you're converting the image to text for transfer which gets re-constituted as an image on arrival at the client.

Kevin Roche
  • 367
  • 1
  • 11
  • thanks Kevin. Can you describe the related html part as well ? – omer bach Jul 08 '13 at 14:34
  • I mean should the "headerImageId" and the "footerImageId" be a part of the html body in some way ? – omer bach Jul 08 '13 at 14:40
  • thanks ! how should i do it for the url of the background i'm using for the table now?
    – omer bach Jul 08 '13 at 14:59
  • Not tried I'm afraid - you might try a similar approach to embedding images i.e. url ("cid:backgroundImageId") where "backgroundImageId" is a previoulsy defined LinkedResource. I might try if I get time tomorrow. – Kevin Roche Jul 08 '13 at 16:01