电子邮件签名中的base64编码图像


95

我必须在电子邮件签名中包含一些图像(公司徽标等)。使用问题电子邮件系统生成的嵌入图像(通常以附件形式发送)和链接图像(需要获得许可才能在收到的电子邮件中显示它们)时,我遇到了各种各样的问题。

我刚刚从交易所收到了一些电子邮件,其中包含徽标的base64图像表示形式,并使用标签进行显示。我正在寻找有关如何在可能的情况下通过电子邮件签名执行此操作的信息(如何为徽标生成base64版本的徽标,以及如何使用该代码才能使其正常工作)?

我已经尝试过一些简单的事情,例如

<body>
<span>
<img src=.... >
</span>
</body>

但我得到的只是替代文字,因此我在这里显然做错了。


Answers:


63

重要

我的以下回答显示了如何使用数据URI嵌入图像。这对Web很有用,但对于大多数电子邮件客户端来说无法正常使用。出于电子邮件目的,请务必阅读Shadow2531的答案


Base-64数据在img标签中是合法的,我相信您的问题是如何正确插入此类图像标签。

您可以使用在线工具或几行代码来生成基本的64位字符串。

从内联数据获取图像的语法是:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme


14
尝试过此方法,但Gmail似乎不支持它。嵌入式附件解决方案似乎可以工作。
Indrek 2012年

嗨,蒂姆,如果您可以在stackoverflow.com/questions/11124540/…上提供一些输入,将会提供很大的帮助。提前致谢。另一件事是有任何解决方案,以便诸如yahoo,gmail之类的邮件域也支持您的解决方案
M Sach 2012年

1
我认为附件(例如@ Shadow2531的解决方案)可能是受更广泛支持的解决方案,但是唯一的了解方法是测试应用了不同安全设置的多个主要电子邮件客户端。使问题进一步复杂化的是,您既可以在网络上也可以在各种客户端中接收电子邮件。例如,在Web上与在Outlook或Thunderbird中进行查看时,Gmail的行为可能有所不同。
Tim Medora 2012年

检查此链接以获取在邮件客户端中使用此技术的支持campaignmonitor.com/blog/post/3927/…(tl;有些支持,但不一致,尤其是在Outlook中)
David Clarke 2013年

5
在2016年,对于大多数电子邮件客户端来说,嵌入仍然不可靠吗?
Eirik Birkeland

129

该图像应作为附件嵌入在邮件中,如下所示:

--boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Transfer-Encoding: base64
Content-ID: <0123456789>
Content-Location: sig.png

base64 data

--boundary

并且,HTML部分将引用如下图像:

<img src="cid:0123456789">

在某些客户端中,src =“ sig.png”也可以使用。

基本上,您会获得多部分/混合,多部分/替代,多部分/相关的消息,其中图像附件在相关部分中。

客户也不应阻止该映像,因为它不是远程的。

或者,这是一个多部分/替代,多部分/相关的示例,作为mbox文件(另存为Windows换行格式,并在末尾添加一个空行。并且,不使用扩展名或.mbs扩展名):

From 
From: from@example.com
To: to@example.com
Subject: HTML Messages with Embedded Pic in Signature
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="alternative_boundary"

This is a message with multiple parts in MIME format.

--alternative_boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

test

-- 
[Picture of a Christmas Tree]

--alternative_boundary
Content-Type: multipart/related; boundary="related_boundary"

--related_boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>test</p>
        <p class="sig">-- <br><img src="cid:0123456789"></p>
    </body>
</html>

--related_boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Location: sig.png
Content-ID: <0123456789>
Content-Transfer-Encoding: base64

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
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

您可以将其导入Sylpheed或Thunderbird(具有“导入/导出工具”扩展名)或Opera的内置邮件客户端。然后,例如在Opera中,您可以切换“首选纯文本”以查看HTML和文本版本之间的区别。无论如何,您会看到HTML版本利用了sig中的嵌入式图片。


如果您可以在stackoverflow.com/questions/11124540/…上提供一些输入,将会有很大的帮助。
M Sach 2012年

如果有机会,@ MSach会看看。
Shadow2531 2012年

4
您能告诉我@ Shadow2531多部分/相关代码将去哪里吗?应该在同一个HTML文件中吗?
Faisal Ashfaq 2014年

1
“像这样” ...像什么?我与Faisal在一起,您如何将其纳入您的信息中
魔鬼的拥护者

1
好的,那句话破坏了我的理解。我要做的是创建一个HTM文件,然后将其加载到Outlook中。然后,我使用签名编辑器的“替换图像”功能来选择本地文件(而不是我手动添加的base64编码图像)。这似乎符合您的意思。感谢您的支持。
魔鬼的拥护者

2

最近,我在电子邮件中包含QR image / png时遇到了同样的问题。QR图像是使用ZXing生成的字节数组。我们不希望将其保存到文件中,因为从文件保存/读取太昂贵(缓慢)。因此,以上两个答案均不适用于我。这是我为解决此问题所做的工作:

import javax.mail.util.ByteArrayDataSource;
import org.apache.commons.mail.ImageHtmlEmail;
...
ImageHtmlEmail email = new ImageHtmlEmail();
byte[] qrImageBytes = createQRCode(); // get your image byte array
ByteArrayDataSource qrImageDataSource = new ByteArrayDataSource(qrImageBytes, "image/png");
String contentId = email.embed(qrImageDataSource, "QR Image");

假设contentId为“ 111122223333”,那么您的HTML部分应具有以下内容:

<img src="cid: 111122223333">

无需将字节数组转换为Base64,因为Commons Mail会自动为您进行转换。希望这可以帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.