Base64 图像到 gmail

Posted

技术标签:

【中文标题】Base64 图像到 gmail【英文标题】：Base64 images to gmail 【发布时间】：2011-03-17 19:26:15 【问题描述】：

我正在为从 iPad 发送的电子邮件生成一些内联图像。在所有桌面电子邮件客户端中看起来都很棒，但 gmail 似乎不喜欢 base64 图像并且它显示为文本。

谁有幸使用 base64 和 gmail 嵌入图像？ 或者知道从 iPad 发送带有图像的 html 电子邮件的更好解决方案？

【问题讨论】：

我认为图像的大小会导致问题。我的图像是 1024x768。 它是否适用于较小的图像？ 截至 2016 年，它们似乎不再起作用；相反，SRC 被剥离，并在其位置使用 alt 标记。 来吧 Google，为什么这一定是个谜？ 它是否适用于较小的图像？ - 不。我发送了 48x48 的图标，当 b64'd 时小于 2 KB - 不高兴 【参考方案1】：

我测试 gmail 不支持原始数据 uri 图像（没有 base64）-我使用这个 sn-p 生成图像（然后发送到 gmail 地址）-但图像不显示 :(

要解决此问题，您需要将图像添加为带有 cid 的附件，并在 img 标签中使用该 cid <img src="cid:123456"> - 更多详细信息 here

function convert() 
  let base64 = imageBase64.value.split('base64,')[1];
  let hex = [...atob(base64)].map(c => c.charCodeAt(0).toString(16).padStart(2, 0));
  let img = 'data:image/png,%' + hex.join('%');

  pic.src = img;
  msg.innerText = img;

Put your img base64 data uri here<br>
<input style="width:200px" id='imageBase64' value="data:image/bmp;base64,Qk0aAwAAAAAAABsAAAAMAAAAEAAQAAEAGAAAAAAACFpyAAAAAAAACB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAKoH8AAAACFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCFpyCFpyKoH8KoH8KoH8AAAACB/NCB/NCFpyCB/NCB/NKoH8CB/NCB/NKoH8CB/NCFpyCFpyKoH8KoH8CFpyCFpyCFpyCFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NAAAAAAAACFpyAAAACFpyCFpyCFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NAAAAAAAACFpyAAAAAAAACFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NCFpyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8KoH8KoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyKoH8KoH8KoH8KoH8CFpyCFpyCFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyKoH8CFpyCFpyKoH8KoH8KoH8CFpyKoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAACFpyKoH8CFpyKoH8KoH8KoH8CFpyKoH8KoH8CFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyKoH8KoH8CFpyKoH8AAAACFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NKoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NAAAAAAAAKoH8KoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8">
<button onclick="convert()">Convert</button><br> Result
<br>
<textarea id='msg' rows="4" cols="50"></textarea><br>
<img id='pic'>

【讨论】：

如何设置内容id？我不明白如何使用它？ @ReyYoung 您可以找到here 的更多详细信息 - 这样做的方式很大程度上取决于您的后端技术 - 因此您需要在这个方向上进行单独的研究。 CID 方法与嵌入式 Base64 方法一样，适用于某些电子邮件客户端，但不适用于其他客户端。唯一可行的方法（几乎）是在 CDN 中托管图像并在 HTML 正文中引用它。【参考方案2】：

这很好用： 我设置了两个 src 属性，一个带有 data:image/png;base64 ，另一个带有指向图像的链接。当您使用 gmail 时，它使用带有链接的 src 属性，而当您使用其他电子邮件客户端时，它使用带有 data:image/png;base64 的 src 属性。 试试吧！。你会看到的。

【讨论】：

【参考方案3】：

来自 Moin Zaman 的链接显示过时的测试结果（从 2008 年开始）。根据我今天的全面测试，Gmail 确实支持为这两种方法显示嵌入的图像。

在&lt;img src="..."&gt;内内联使用base64编码图像

<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO..."></body></html>

使用base64编码的图片作为附件

Message-ID: <BE0243A40B89D84DB342702BC5FD6D313EA3BE1B@BYMAIL.example.com>
Accept-Language: en-US
Content-Language: en-US
X-MS-Has-Attach: yes
X-MS-TNEF-Correlator:
x-originating-ip: [xxx.xxx.xxx.xxx]

Content-Type: multipart/related;
    boundary="_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_";
    type="multipart/alternative"
MIME-Version: 1.0
Return-Path: email@example.com
X-OriginatorOrg: example.com

--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: multipart/alternative;
    boundary="_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_"

...skipping Content-Type: text/plain which would be here for this example...

--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<html><body><img border=3D"0" width=3D"980" height=3D"230" id=3D"Picture_x0020_1" src==3D"cid:image001.png@01CDA268.204677C0"></body></html>

--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_--

--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=32756;
    creation-date="Mon, 08 Oct 2012 15:27:07 GMT";
    modification-date="Mon, 08 Oct 2012 15:27:07 GMT";
Content-ID: <image001.png@01CDA268.204677C0>
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO
xAAADsQBlSsOGwAAf5lJREFUeF7tvQlgVdW18L+ZR20mpsSLCYlBQKwgwRCMr9TAqzg0CAl98Y9a
ikBfHxL1A/r0tUr77Feg1mDav4LUijxTk8hLRIstQ2mJhEiAWAEpNCGRa8KUSQXCzLf2cOZz7j33
5s5Zx6j3nruHtX97n33WWWfttbtdv36d4IEEkAASQAJIAAkgASSABJCA/wl0938VWAMSQAJIAAkg
ASSABJAAEkAClAAq3zgOkAASQAJIAAkgASSABJBAgAig8h0g0FgNEkACSAAJIAEkgASQABJA5RvH
...

要进行自己的测试，您可以使用以下技术之一发送带有内嵌图像的电子邮件

使用代码creating your own base64 image strings 启用和使用Google Lab for Inserting Images 将图像粘贴到 Outlook 2010 等电子邮件客户端

使用上述方法之一向您的 Gmail 帐户发送电子邮件，然后在 Gmail 网络客户端（任何可用的浏览器）中打开电子邮件，并使用回复按钮旁边的向下箭头选择显示原始选项。这将向您展示它是如何被接收的。

我认为最好的做法是使用嵌入图像作为附件方法。

在我使用 Gmail 网络客户端进行的测试中，如果我在一封不同大小的电子邮件中发送了 30 张图片，其中一些将无法成功加载，显示图片容器但不是图片。如果发生这种情况，请尝试重新加载页面。

在我的测试中（Windows 7）...

Chrome（最新）需要重新加载几次才能成功加载/显示所有 30 张图片 无论重新加载多少次，Opera（最新版）都无法成功显示全部 30 张图片 Firefox（最新）始终无问题地显示所有 30 张图片 Internet Explorer 9（最新版）始终如一地显示所有 30 张图片而没有问题 Safari（最新）始终无问题地显示所有 30 张图片

【讨论】：

似乎不再支持它（Gmail）.. 它只是删除了 src 属性并添加了 alt 属性.. 今天测试，Gmail 确实不支持使用 data: 网址的图片。它只是使用 alt 文本代替。 我今天（2016 年 11 月 7 日）测试了这个，Gmail 不显示数据：网址。 进一步测试，内联数据：仍未显示。 2017 年 1 月 gmail 不支持 base64 图像 15/02/2017【参考方案4】：

试试这个好友.. 我相信这可以将图片作为附件包含在内

                    $output_hex_string_img = $image;
                    $output_bin_string_img = base64_decode($output_hex_string_img);
                    //echo base64_encode( $output_bin_string_img );
                    $XXX = base64_encode( $output_bin_string_img );

                    $from_name = "Senders Name";
                    $from_mail = "yyyyyyyy@gmail.com";
                    $replyto = "yyyyyyyy@gmail.com";
                    $subject = "Device Missing Notification";
                $message = "Device Missing notification has been activated on your device. Please change this setting when you find your smartphone back. Best Of Luck!!\r\r ";



                    $mailto = 'xxxxxxxx@mail.com';



                        $file = $XXX;
                        $filename = "Print_shot.png";
                        $uid = md5(uniqid(time()));
                        $name = basename($file);
                        $header = "From: ".$from_name." <".$from_mail.">\r\n";
                        $header .= "Reply-To: ".$replyto."\r\n";
                        $header .= "MIME-Version: 1.0\r\n";
                        $header .= "Content-Type: multipart/mixed; boundary=\"".$uid."\"\r\n\r\n";
                        $header .= "This is a multi-part message in MIME format.\r\n";
                        $header .= "--".$uid."\r\n";
                        $header .= "Content-type:text/html; charset=iso-8859-1\r\n";
                        $header .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
                        $header .= $message."\r\n\r\n";
                        $header .= "--".$uid."\r\n";
                        $header .= "Content-Type: application/octet-stream; name=\"".$filename."\"\r\n"; // use different content types here
                        $header .= "Content-Transfer-Encoding: base64\r\n";
                        $header .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
                        $header .= $file."\r\n\r\n";
                        $header .= "--".$uid."--";
                        mail($mailto, $subject, "", $header);

但是您必须通过在标头中使用不同的 Content-Type 来将所有内容包含在标头中。并且正文中出现的可能是邮件函数中的第三个参数的任何内容都将作为空白字符串传递..

【讨论】：

【参考方案5】： 
MFMailComposeViewController *picker = [[MFMailComposeViewController alloc] init];

[picker addAttachmentData:UIImageJPEGRepresentation(_tempImage,1) mimeType:mimeType fileName:filename];

[picker setMessageBody:emailBody isHTML:YES];

如果isHTML 是YES，addAttachmentData 将自动更改为 base64 字符串，在电子邮件 html 中可以看到您的 img。

如果isHTML 为NO，则addAttachmentData 为附件。

【讨论】：

问题出在收件人，而不是发送方式【参考方案6】：

任何官方文档似乎都没有，但 Gmail 绝对不支持这一点，内联或作为 base64 中的附件。

以下是活动监视器尝试的一些测试：Embedding images in emailEmbedding images revisited

【讨论】：

【参考方案7】：

确保您设置了 Content-Type: multipart/mixed; , 边界和 Content-Transfer-Encoding: base64

【讨论】：

我想你可能在谈论电子邮件附件。

以上是关于Base64 图像到 gmail的主要内容，如果未能解决你的问题，请参考以下文章

html 中的内联图像，base64，不会出现在 gmail 中（但会出现在 Thunderbird 中）

Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像

使用 Python 进行 base64 解码，并使用基于 REST 的 Gmail API 下载附件

使用 Gmail API 创建的草稿邮件中未呈现图像

将 base64 图像作为图像发送到 RestApi (MultiPart)

对于从 java 程序发送的电子邮件，html 内容中的 png 图像未显示在 gmail 客户端上