如何在 Outlook 客户端中显示 html 邮件中的图像？答案

【问题标题】：how to make images in html mail presented in outlook client?如何在 Outlook 客户端中显示 html 邮件中的图像？
【发布时间】：2013-07-05 21:28:57
【问题描述】：

我有这个 html，我将其作为邮件发送（参见小提琴），其中我使用 2 个外部图像（一个用于公司徽标，一个用于表格背景）: :

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">

我将它从代码发送到许多电子邮件客户端：gmail、yahoo、ios。仅在 Outlook 客户端中不显示图片：

我该如何克服它？这与我发送它的方式（通过 c# 代码）或图像链接到 html 的方式有关吗？

我将不胜感激一步一步的回答。问候，奥马尔。

【问题讨论】：

主图像对我来说很好。但大多数客户端（Hotmail/Outlook）不支持背景图片。
那么有什么选择呢？
不要使用背景图片。这也是错误的<img src="http://www.hawkaviation.com/assets/static-header.jpg" alt="Hawk Aviation""/></a>alt 标记上的 2 个双引号和末尾的随机关闭 </a> 标记。
@NickR - Outlook.com 和桌面版本确实支持背景图像，只是代码有点麻烦。值得庆幸的是，Campaign Monitor 提供了一个online generator，这让它变得简单。

标签： c# html css email embed

【解决方案1】：

这就是我在 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);
}

引用上图的 HTML 是：

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

headerImageId 指的是 LinkedResource 的 ContentId。

基本上，您是将图像转换为文本以进行传输，然后在到达客户时将其重新构成为图像。

【讨论】：

感谢凯文。你能描述一下相关的html部分吗？
我的意思是“headerImageId”和“footerImageId”是否应该以某种方式成为 html 正文的一部分？
谢谢！我应该如何处理我现在用于表格的背景网址？ hisplaceautorepair.com/images/auto/Primary_Images/…); padding: 38px">

恐怕没有尝试过 - 您可以尝试类似的方法来嵌入图像，即 url ("cid:backgroundImageId")，其中 "backgroundImageId" 是先前定义的 LinkedResource。如果明天有时间我可能会试试。

【解决方案2】：

您遇到此问题是因为 Outlook 不会在没有用户单击图像下载的情况下呈现外部图像，或者他们没有选择自动下载所选外部图像的选项。

解决此问题的方法是将图像嵌入到电子邮件中。

要嵌入图像，您必须使用 AlternatView 对象和 LinkedResource 对象。

您可以在以下位置找到有关如何执行此操作的示例代码：How to embed multiple images in email body using .NET

【讨论】：