在 html 电子邮件中嵌入图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6706891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
embedding image in html email
提问by tbone
I'm trying to send a multipart/related html email with embedded gif images. This email is generated using Oracle PL/SQL. My attempts have failed, with the image showing up as a red X (in Outlook 2007 and yahoo mail)
我正在尝试发送带有嵌入式 gif 图像的多部分/相关 html 电子邮件。此电子邮件是使用 Oracle PL/SQL 生成的。我的尝试失败了，图像显示为红色 X（在 Outlook 2007 和 yahoo 邮件中）
I've been sending html emails for some time, but my requirements are now to use several gif images in the email. I can store these on one of our web servers and just link to them, but many users email clients will not show them automatically and will need to either change settings or manually download them for each email.
我已经发送 html 电子邮件有一段时间了，但我现在的要求是在电子邮件中使用几个 gif 图像。我可以将这些存储在我们的一个网络服务器上并只链接到它们，但是许多用户电子邮件客户端不会自动显示它们，并且需要更改设置或为每封电子邮件手动下载它们。
So, my thoughts are to embed the image. My questions are:
所以，我的想法是嵌入图像。我的问题是：
- What am I doing wrong here?
- Is the embedding approach the correct one?
- Any other options if I need to use more and more images? Attachments won't work, as the images are typically logos and icons that won't make sense out of the context of the message. Also, some elements of the email are links into an online system, so generating a static PDF and attaching won't work (to my knowledge anyway).
- 我在这里做错了什么？
- 嵌入方法是正确的吗？
- 如果我需要使用越来越多的图像，还有其他选择吗？附件将不起作用，因为图像通常是徽标和图标，在消息的上下文之外没有意义。此外，电子邮件的某些元素是指向在线系统的链接，因此无法生成静态 PDF 并进行附加（据我所知）。
snippet:
片段：
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--
Many thanks.
非常感谢。
BTW: Yes, I have verified that the base64 data is correct, as I can embed the image in the html itself (using same algo use for creating header data) and see image in Firefox/IE.
顺便说一句：是的，我已经验证了 base64 数据是正确的，因为我可以将图像嵌入 html 本身（使用相同的算法用于创建标题数据）并在 Firefox/IE 中查看图像。
I should also note that this is NOT for spam, the emails are sent to specific clients who are expecting it daily. The content is data-driven, and not adverts.
我还应该注意，这不是垃圾邮件，这些电子邮件每天都会发送给特定的客户。内容是数据驱动的，而不是广告。
回答by Bernd
Try to insert it directly, this way you can insert multiple images at various locations in the email.
尝试直接插入，这样您就可以在电子邮件的不同位置插入多个图像。
<img src="data:image/jpg;base64,{{base64-data-string here}}" />
And to make this post usefully for others to: If you don't have a base64-data string, create one easily at: http://www.motobit.com/util/base64-decoder-encoder.aspfrom a image file.
为了使这篇文章对其他人有用：如果您没有 base64 数据字符串，请在以下位置轻松创建一个：http: //www.motobit.com/util/base64-decoder-encoder.asp从图像文件.
Email source code looks something like this, but i really cant tell you what that boundary thing is for:
电子邮件源代码看起来像这样，但我真的不能告诉你那个边界是做什么的：
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--
//EDIT: Oh, i just realize if you insert the first code snippet from my post to write an email with thunderbird, thunderbird automatically changes the html code to look pretty much the same as the second code in my post.
//编辑：哦，我刚刚意识到如果你插入我帖子中的第一个代码片段来用雷鸟写一封电子邮件，雷鸟会自动将 html 代码更改为与我帖子中的第二个代码几乎相同。
回答by Khyati Elhance
The other solution is attaching the image as attachment and then referencing it html code using cid.
另一种解决方案是将图像附加为附件，然后使用 cid 引用它的 html 代码。
HTML Code:
HTML代码：
<html>
<head>
</head>
<body>
<img width=100 height=100 id="1" src="cid:Logo.jpg">
</body>
</html>
C# Code:
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();
回答by Pavel Perna
I don't find any of the answers here useful, so I am providing my solution.
我在这里找不到任何有用的答案，所以我提供了我的解决方案。
The problem is that you are using
multipart/relatedas the content type which is not good in this case. I am usingmultipart/mixedand inside itmultipart/alternative(it works on most clients).The message structure should be as follows:
[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--
问题是您使用
multipart/related的内容类型在这种情况下并不好。我正在使用multipart/mixed它multipart/alternative（它适用于大多数客户）。消息结构应如下所示：
[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--
Then it will work
然后它会工作
回答by Erwin Mayer
If it does not work, you may try one of these tools that convert the image to an HTML table (beware the size of your image though):
如果它不起作用，您可以尝试使用以下工具之一将图像转换为 HTML 表格（但请注意图像的大小）：
回答by Brian
Using Base64 to embed images in html is awesome. Nonetheless, please notice that base64 strings can make your email size big.
使用 Base64 在 html 中嵌入图像非常棒。尽管如此，请注意 base64 字符串会使您的电子邮件变大。
Therefore,
所以，
1) If you have many images, uploading your images to a server and loading those images from the server can make your email size smaller. (You can get a lot of free services via Google)
1) 如果您有很多图片，将您的图片上传到服务器并从服务器加载这些图片可以缩小您的电子邮件大小。（你可以通过谷歌获得很多免费服务）
2) If there are just a few images in your mail, using base64 strings is definitely an awesome option.
2) 如果你的邮件中只有几张图片，使用 base64 字符串绝对是一个很棒的选择。
Besides the choices provided by existing answers, you can also use a command to generate a base64 string on linux:
除了现有答案提供的选项外，您还可以使用命令在 linux 上生成 base64 字符串：
base64 test.jpg
回答by Scooter Crawford
I know this is an old post, but the current answers dont address the fact that outlook and many other email providers dont support inline images or CID images. The most effective way to place images in emails is to host it online and place a link to it in the email. For small email lists a public dropbox works fine. This also keeps the email size down.
我知道这是一篇旧帖子，但当前的答案并没有解决 Outlook 和许多其他电子邮件提供商不支持内嵌图像或 CID 图像的事实。在电子邮件中放置图像的最有效方法是将其在线托管并在电子邮件中放置指向它的链接。对于小型电子邮件列表，公共保管箱工作正常。这也减少了电子邮件的大小。
回答by tstrand66
For those who couldnt get one of these solutions working: Send inline image in emailFollowing the steps laid out in the solution offered by @T30 i was able to get my inline image to display without being blocked by outlook (previous methods it was blocked). If you are using exchange like we are then also when doing:
对于那些无法使这些解决方案之一起作用的人： 在电子邮件中发送内嵌图像按照@T30 提供的解决方案中列出的步骤，我能够显示内嵌图像而不会被 Outlook 阻止（以前的方法被阻止） . 如果您像我们一样使用交换，那么在执行以下操作时：
service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("[email protected]");
SmtpClient smtp = new SmtpClient(service.Url.Host);
you will need to pass it your exchange service url host. Other than that following this solution should allow you to easily send embedded imgages.
您需要将其传递给您的交换服务 url 主机。除了遵循此解决方案之外，您还可以轻松发送嵌入的图像。
回答by Steven Newman
You need 3 boundaries for inline images to be fully compliant.
Everything goes inside the
multipart/mixed.Then use the
multipart/relatedto contain yourmultipart/alternativeand your image attachment headers.Lastly, include your downloadable attachments inside the last boundary of
multipart/mixed.
内嵌图像需要 3 个边界才能完全兼容。
一切都在
multipart/mixed.然后使用
multipart/related包含您multipart/alternative和您的图像附件标题。最后，将您的可下载附件包含在
multipart/mixed.
回答by GerardV
There's actually a very good blog post that lists pro's and cons of three different approaches to this problem by Martyn Davies. You can read it at https://sendgrid.com/blog/embedding-images-emails-facts/.
实际上，Martyn Davies 有一篇非常好的博客文章，其中列出了解决此问题的三种不同方法的优缺点。您可以在https://sendgrid.com/blog/embedding-images-emails-facts/阅读它。
I'd like to add a fourth approach using CSS background images.
我想添加第四种使用 CSS 背景图像的方法。
Add
添加
<div id="myImage"></div>
to your e-mail body and a css class like:
到您的电子邮件正文和一个 css 类，如：
#myImage {
background-image: url('data:image/png;base64,iVBOR...[some more encoding]...rkggg==');
width: [the-actual-image-width];
height: [the-actual-image-height];
}
回答by Peter
It may be of interest that both Outlook and Outlook Express can generate these multipart image email formats, if you insert the image files using the Insert / Picture menu function.
如果您使用“插入/图片”菜单功能插入图像文件，那么 Outlook 和 Outlook Express 都可以生成这些多部分图像电子邮件格式，这可能很有趣。
Obviously the email type must be set to HTML (not plain text).
显然，电子邮件类型必须设置为 HTML（不是纯文本）。
Any other method (e.g. drag/drop, or any command-line invocation) results in the image(s) being sent as an attachment.
任何其他方法（例如拖放或任何命令行调用）都会导致图像作为附件发送。
If you then send such an email to yourself, you can see how it is formatted! :)
如果您将这样的电子邮件发送给自己，您可以看到它的格式！:)
FWIW, I am looking for a standalone windows executable which does inline images from the command line mode, but there seem to be none. It's a path which many have gone up... One can do it with say Outlook Express, by passing it an appropriately formatted .eml file.
FWIW，我正在寻找一个独立的 Windows 可执行文件，它可以从命令行模式执行内联图像，但似乎没有。这是一条很多人已经走上的道路...人们可以使用 Outlook Express 来实现，方法是向它传递一个格式正确的 .eml 文件。
