在html电子邮件中嵌入图像

问题描述 投票：95回答：11

我正在尝试发送带有嵌入式gif图像的多部分/相关html电子邮件。此电子邮件是使用Oracle PL / SQL生成的。我的尝试失败了，图像显示为红色X（在Outlook 2007和雅虎邮件中）

我已经发送了一段时间的HTML电子邮件，但我现在要求在电子邮件中使用几个gif图像。我可以将它们存储在我们的一个Web服务器上并链接到它们，但许多用户的电子邮件客户端不会自动显示它们，并且需要更改设置或手动为每个电子邮件下载它们。

所以，我的想法是嵌入图像。我的问题是：

  1. 我在这做错了什么？
  2. 嵌入方法是否正确？
  3. 如果我需要使用越来越多的图像，还有其他选择吗？附件不起作用，因为图像通常是徽标和图标，这些图标和图标在消息的上下文中无法理解。此外，电子邮件的某些元素是指向在线系统的链接，因此生成静态PDF和附加将无法工作（据我所知）。

片段：

MIME-Version: 1.0
To: [email protected]
BCC: [email protected]
From: [email protected]
Subject: Test
Reply-To: [email protected]
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html> 

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--

非常感谢。

顺便说一句：是的，我已经验证了base64数据是正确的，因为我可以将图像嵌入到html本身（使用相同的algo用于创建标题数据）并在Firefox / IE中查看图像。

我还应该注意，这不是针对垃圾邮件，而是将电子邮件发送给每天都在期待的特定客户。内容是数据驱动的，而不是广告。

html image oracle email mime
11个回答
122
投票

尝试直接插入，这样您就可以在电子邮件的不同位置插入多个图像。

<img src="data:image/jpg;base64,{{base64-data-string here}}" />

并且要使这篇文章对其他人有用：如果你没有base64数据字符串，可以从图像文件中轻松地创建一个：http://www.motobit.com/util/base64-decoder-encoder.asp。

电子邮件源代码看起来像这样，但我真的不能告诉你这个边界是什么：

 To: [email protected]
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

//编辑：哦，我只是意识到如果你从我的帖子中插入第一个代码片段来写一个带有thunderbird的电子邮件，thunderbird会自动更改html代码，看起来和我帖子中的第二个代码差不多。

1
投票

实际上有一篇非常好的博客文章列出了Martyn Davies对这个问题的三种不同方法的利弊。你可以在qazxsw poi阅读它。

我想使用CSS背景图像添加第四种方法。

加

https://sendgrid.com/blog/embedding-images-emails-facts/

到您的电子邮件正文和css类，如：

<div id="myImage"></div>
-24
投票

如果您使用Outlook发送带超链接的静态图像，一种简单的方法是使用Word。

  1. 打开MS Word
  2. 将图像复制到空白页面
  3. 添加图像的超链接（Ctrl + K）
  4. 将图像复制到您的电子邮件中
15
投票

另一个解决方案是将图像作为附件附加，然后使用cid引用它的html代码。

HTML代码：

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id=""1"" src=""cid:Logo.jpg"">
    </body>
</html>

C＃代码：

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("[email protected]");
string file = @"C:\Users\acv\Pictures\Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments(0).ContentId = "Logo.jpg";
email.SendAndSaveCopy();
9
投票

我没有发现任何有用的答案，所以我提供了我的解决方案。

  1. 问题是您使用multipart/related作为内容类型，在这种情况下不好。我正在使用multipart/mixed并在其中multipart/alternative（它适用于大多数客户）。
  2. 消息结构应如下所示： [Headers] Content-type:multipart/mixed; boundary="boundary1" --boundary1 Content-type:multipart/alternative; boundary="boundary2" --boundary2 Content-Type: text/html; charset=ISO-8859-15 Content-Transfer-Encoding: 7bit [HTML code with a href="cid:..."] --boundary2 Content-Type: image/png; name="moz-screenshot.png" Content-Transfer-Encoding: base64 Content-ID: <part1.06090408.01060107> Content-Disposition: inline; filename="moz-screenshot.png" [base64 image data here] --boundary2-- --boundary1--

然后它会工作

7
投票

如果它不起作用，您可以尝试使用这些工具之一将图像转换为HTML表格（请注意图像的大小）：

4
投票

使用Base64在html中嵌入图像非常棒。尽管如此，请注意base64字符串可以使您的电子邮件大小变大。

因此，

1）如果您有许多图像，将图像上传到服务器并从服务器加载这些图像可以使您的电子邮件大小更小。 （你可以通过谷歌获得很多免费服务）

2）如果你的邮件中只有几张图片，使用base64字符串肯定是一个很棒的选择。

除了现有答案提供的选择外，您还可以使用命令在linux上生成base64字符串：

base64 test.jpg
2
投票
  1. 内联图像需要3个边界才能完全兼容。
  2. 一切都在multipart/mixed内。
  3. 然后使用multipart/related包含您的multipart/alternative和图像附件标题。
  4. 最后，在multipart/mixed的最后一个边界内包含您的可下载附件。
2
投票

对于那些无法使其中一个解决方案正常工作的人：Send inline image in email按照@ T30提供的解决方案中列出的步骤，我能够显示我的内嵌图像而不被outlook阻止（以前的方法被阻止）。如果你正在使用交换，那么我们也在做：

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("[email protected]");
SmtpClient smtp = new SmtpClient(service.Url.Host);

你需要将它传递给你的交换服务网址主机。除此之外，此解决方案应该允许您轻松发送嵌入式imgages。

2
投票

我知道这是一个老帖子，但目前的答案并没有解决Outlook和许多其他电子邮件提供商不支持内嵌图像或CID图像的事实。在电子邮件中放置图像的最有效方法是在线托管图像并在电子邮件中放置链接。对于小型电子邮件列表，公共Dropbox工作正常。这也会降低电子邮件的大小。

1
投票

如果使用“插入/图片”菜单功能插入图像文件，Outlook和Outlook Express都可以生成这些多部分图像电子邮件格式，这可能会很有意义。

显然，电子邮件类型必须设置为HTML（不是纯文本）。

任何其他方法（例如拖放或任何命令行调用）都会导致图像作为附件发送。

如果您随后发送此类电子邮件给自己，您可以看到它是如何格式化的！ :)

FWIW，我正在寻找一个独立的Windows可执行文件，它可以从命令行模式执行内嵌图像，但似乎没有。这是一条很多人已经走过的道路......人们可以通过传递适当格式化的.eml文件来说明Outlook Express。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.