CODEWITHSUNDEEP
c#htmlcssemailembed
omer bach
omer bach

Reputation: 2405

how to make images in html mail presented in outlook client?

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.

Upvotes: 0

Views: 2695

Answers (2)

Kevin Roche
Kevin Roche

Reputation: 377

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.

Upvotes: 1

Avitus
Avitus

Reputation: 15968

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

Upvotes: 1

Related Questions