将Base64图片发送到Gmail

Question

将Base64图片发送到Gmail

htmlemailipadgmailbase64

65

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

有没有人成功嵌入了使用base64和Gmail的图像？或者知道从iPad发送带有图像的HTML电子邮件的更好解决方案？

- Steven Baughman

我认为图像的大小引起了问题。我的图像尺寸是1024x768。 - Steven Baughman

它能处理较小的图像吗？ - ogur

5

截至2016年，似乎它们不再起作用，而是剥离了SRC并使用“ alt”标签来代替。 - mix3d

2

拜托谷歌，这为什么要成为一个谜呢？ - Captain Hypertext

它能处理较小的图像吗？不行。我发送了48x48的图标，当进行b64编码时，它们的大小不到2千字节 - 但是没有成功。 - Caius Jard

8个回答

11

目前似乎没有官方文件证实，但Gmail明确不支持此功能，无论是以inline形式还是以base64附件形式。

下面是Campaign Monitor进行的一些测试：
在电子邮件中嵌入图像
 重新访问嵌入图像

- Moin Zaman

2

确保设置Content-Type: multipart/mixed;，boundary和Content-Transfer-Encoding: base64

- valexa

3

我认为你可能在谈论电子邮件附件。 - Nikita Rybak

-1

我使用这个生成器 https://codebeautify.org/svg-to-base64-converter

当你进入网站后，你可以上传你的图片，例如一个SVG图片。上传完毕后，你将会得到一个代码片段和一个嵌入式的Base64图片，你只需要将其复制粘贴到你的HTML文件中即可。

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4xNDciIGhlaWdodD0iNDAuMTMzIiB2aWV3Qm94PSIwIDAgMjIuMTQ3IDQwLjEzMyI+CiAgPGcgaWQ9IlBhdGhfNjExOCIgZGF0YS1uYW1lPSJQYXRoIDYxMTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuNSAxLjUpIiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik0xNS42NTEsNi4xNjVoMy41Vi4yNjFBNDYuNyw0Ni43LDAsMCwwLDE0LjA1NiwwQzkuMDE1LDAsNS41NjMsMy4wNzUsNS41NjMsOC43MjV2NS4ySDB2Ni42SDUuNTYzVjM3LjEzM0gxMi4zOFYyMC41MjVoNS4zMzhsLjg0OS02LjZIMTIuMzhWOS4zNzhjMC0xLjkwNy41MjktMy4yMTMsMy4yNzEtMy4yMTNaIiBzdHJva2U9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0gMTQuMDU1NDk2MjE1ODIwMzEgMy44MTQ2OTcyNjU2MjVlLTA2IEMgOS4wMTQ5NTY0NzQzMDQxOTkgMy44MTQ2OTcyNjU2MjVlLTA2IDUuNTYyNzI2MDIwODEyOTg4IDMuMDc1MDkyMzE1NjczODI4IDUuNTYyNzI2MDIwODEyOTg4IDguNzI0ODUzNTE1NjI1IEwgNS41NjI3MjYwMjA4MTI5ODggMTMuOTI0OTY0OTA0Nzg1MTYgTCAtMy44MTQ2OTcyNjU2MjVlLTA2IDEzLjkyNDk2NDkwNDc4NTE2IEwgLTMuODE0Njk3MjY1NjI1ZS0wNiAyMC41MjQ4MTQ2MDU3MTI4OSBMIDUuNTYyNzI2MDIwODEyOTg4IDIwLjUyNDgxNDYwNTcxMjg5IEwgNS41NjI3MjYwMjA4MTI5ODggMzcuMTMzMjI0NDg3MzA0NjkgTCAxMi4zODAxNTU1NjMzNTQ0OSAzNy4xMzMyMjQ0ODczMDQ2OSBMIDEyLjM4MDE1NTU2MzM1NDQ5IDIwLjUyNDgxNDYwNTcxMjg5IEwgMTcuNzE4MDU1NzI1MDk3NjYgMjAuNTI0ODE0NjA1NzEyODkgTCAxOC41NjY2MDY1MjE2MDY0NSAxMy45MjQ5NjQ5MDQ3ODUxNiBMIDEyLjM4MDE1NTU2MzM1NDQ5IDEzLjkyNDk2NDkwNDc4NTE2IEwgMTIuMzgwMTU1NTYzMzU0NDkgOS4zNzc1OTM5OTQxNDA2MjUgQyAxMi4zODAxNTU1NjMzNTQ0OSA3LjQ3MDE2MzM0NTMzNjkxNCAxMi45MDk1OTY0NDMxNzYyNyA2LjE2NDY5MzgzMjM5NzQ2MSAxNS42NTEwNjU4MjY0MTYwMiA2LjE2NDY5MzgzMjM5NzQ2MSBMIDE5LjE0NjgxNjI1MzY2MjExIDYuMTY0NjkzODMyMzk3NDYxIEwgMTkuMTQ2ODE2MjUzNjYyMTEgMC4yNjEwOTMxMzk2NDg0Mzc1IEMgMTguNTQ0ODQ1NTgxMDU0NjkgMC4xODEzMTI1NjEwMzUxNTYyIDE2LjQ3MDYxNTM4Njk2Mjg5IDMuODE0Njk3MjY1NjI1ZS0wNiAxNC4wNTU0OTYyMTU4MjAzMSAzLjgxNDY5NzI2NTYyNWUtMDYgTSAxNC4wNTU0OTYyMTU4MjAzMSAtMS40OTk5OTYxODUzMDI3MzQgQyAxNi42ODQxNDY4ODExMDM1MiAtMS40OTk5OTYxODUzMDI3MzQgMTguODA3MzU1ODgwNzM3MyAtMS4yOTcwMTYxNDM3OTg4MjggMTkuMzQzODg1NDIxNzUyOTMgLTEuMjI1OTA2MzcyMDcwMzEyIEwgMjAuNjQ2ODE2MjUzNjYyMTEgLTEuMDUzMjI2NDcwOTQ3MjY2IEwgMjAuNjQ2ODE2MjUzNjYyMTEgMC4yNjEwOTMxMzk2NDg0Mzc1IEwgMjAuNjQ2ODE2MjUzNjYyMTEgNi4xNjQ2OTM4MzIzOTc0NjEgTCAyMC42NDY4MTYyNTM2NjIxMSA3LjY2NDY5MzgzMjM5NzQ2MSBMIDE5LjE0NjgxNjI1MzY2MjExIDcuNjY0NjkzODMyMzk3NDYxIEwgMTUuNjUxMDY1ODI2NDE2MDIgNy42NjQ2OTM4MzIzOTc0NjEgQyAxNC44Nzg1NTYyNTE1MjU4OCA3LjY2NDY5MzgzMjM5NzQ2MSAxNC4zMjYxNTY2MTYyMTA5NCA3Ljc5NDcwNDQzNzI1NTg1OSAxNC4xMzU1MDU2NzYyNjk1MyA4LjAyMTM3Mzc0ODc3OTI5NyBDIDEzLjk2NjA2NjM2MDQ3MzYzIDguMjIyODI0MDk2Njc5Njg4IDEzLjg4MDE1NTU2MzM1NDQ5IDguNjc5MTI0ODMyMTUzMzIgMTMuODgwMTU1NTYzMzU0NDkgOS4zNzc1OTM5OTQxNDA2MjUgTCAxMy44ODAxNTU1NjMzNTQ0OSAxMi40MjQ5NjQ5MDQ3ODUxNiBMIDE4LjU2NjYwNjUyMTYwNjQ1IDEyLjQyNDk2NDkwNDc4NTE2IEwgMjAuMjcxODA2NzE2OTE4OTUgMTIuNDI0OTY0OTA0Nzg1MTYgTCAyMC4wNTQzNTU2MjEzMzc4OSAxNC4xMTYyNDMzNjI0MjY3NiBMIDE5LjIwNTgwNjczMjE3NzczIDIwLjcxNjA5NDk3MDcwMzEyIEwgMTkuMDM3NTQ2MTU3ODM2OTEgMjIuMDI0ODE0NjA1NzEyODkgTCAxNy43MTgwNTU3MjUwOTc2NiAyMi4wMjQ4MTQ2MDU3MTI4OSBMIDEzLjg4MDE1NTU2MzM1NDQ5IDIyLjAyNDgxNDYwNTcxMjg5IEwgMTMuODgwMTU1NTYzMzU0NDkgMzcuMTMzMjI0NDg3MzA0NjkgTCAxMy44ODAxNTU1NjMzNTQ0OSAzOC42MzMyMjQ0ODczMDQ2OSBMIDEyLjM4MDE1NTU2MzM1NDQ5IDM4LjYzMzIyNDQ4NzMwNDY5IEwgNS41NjI3MjYwMjA4MTI5ODggMzguNjMzMjI0NDg3MzA0NjkgTCA0LjA2MjcyNjAyMDgxMjk4OCAzOC42MzMyMjQ0ODczMDQ2OSBMIDQuMDYyNzI2MDIwODEyOTg4IDM3LjEzMzIyNDQ4NzMwNDY5IEwgNC4wNjI3MjYwMjA4MTI5ODggMjIuMDI0ODE0NjA1NzEyODkgTCAtMy44MTQ2OTcyNjU2MjVlLTA2IDIyLjAyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDIyLjAyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDIwLjUyNDgxNDYwNTcxMjg5IEwgLTEuNTAwMDAzODE0Njk3MjY2IDEzLjkyNDk2NDkwNDc4NTE2IEwgLTEuNTAwMDAzODE0Njk3MjY2IDEyLjQyNDk2NDkwNDc4NTE2IEwgLTMuODE0Njk3MjY1NjI1ZS0wNiAxMi40MjQ5NjQ5MDQ3ODUxNiBMIDQuMDYyNzI2MDIwODEyOTg4IDEyLjQyNDk2NDkwNDc4NTE2IEwgNC4wNjI3MjYwMjA4MTI5ODggOC43MjQ4NTM1MTU2MjUgQyA0LjA2MjcyNjAyMDgxMjk4OCA1LjU5NzYxNDI4ODMzMDA3OCA1LjAzMTY0NTc3NDg0MTMwOSAyLjk4NzQ4Mzk3ODI3MTQ4NCA2Ljg2NDc0NjA5Mzc1IDEuMTc2NjU0ODE1NjczODI4IEMgOC42MzczNDYyNjc3MDAxOTUgLTAuNTc0NDI0NzQzNjUyMzQzOCAxMS4xMjM4NjYwODEyMzc3OSAtMS40OTk5OTYxODUzMDI3MzQgMTQuMDU1NDk2MjE1ODIwMzEgLTEuNDk5OTk2MTg1MzAyNzM0IFoiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI2YzYjYxZiIvPgogIDwvZz4KPC9zdmc+Cg=='/>

非常好用。

- Medupi Ramaboea

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

-1

我测试了一下，发现 Gmail 不支持原始数据 URI 图像（不带 base64） - 我使用以下代码段生成图像（然后将其发送到 Gmail 地址） - 但图像未显示 :(

为解决此问题，您需要将图像作为带有 cid 的附件添加，并在 img 标记中使用该 cid：<img src="cid:123456"> - 更多细节请参阅这里

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

- Kamil Kiełczewski

如何设置内容 ID？我不明白如何使用它？ - rakesh shrestha

@ReyYoung，你可以在这里找到更多相关细节。具体实现方式高度依赖于你的后端技术，因此你需要进行单独的研究。 - Kamil Kiełczewski

CID方法和嵌入式Base64方法一样，对于某些电子邮件客户端有效，而对于其他客户端则无效。唯一几乎适用于所有情况的方法是将图像托管在CDN中，并在HTML正文中引用它。 - Alan B

-2

试试这个，伙计们..我相信这会起作用，可以将图像作为附件包含在内

                    $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在头部中包含所有内容。无论出现在邮件函数中的第三个参数是什么，都将作为空字符串传递。

- Shivek Parmar

-2

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

- Ivan Extremera

-11

MFMailComposeViewController *picker = [[MFMailComposeViewController alloc] init];

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

[picker setMessageBody:emailBody isHTML:YES];

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

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

- Lion

1

问题在于接收方，而不是发送方法。 - Ashley Mills

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cusman · Accepted Answer

从Moin Zaman得到的链接显示测试结果已经过时（来自2008年）。根据我今天的全面测试，Gmail确实支持使用两种方法来显示嵌入式图片。

在<img src="...">标签内使用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
...

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

通过创建自己的base64图像字符串的代码
启用并使用Google插入图片实验室
将图像粘贴到像Outlook 2010这样的电子邮件客户端中

使用上述方法之一向您的Gmail帐户发送电子邮件，然后在Gmail Web客户端（任何有效的浏览器）中打开该电子邮件，并使用回复按钮旁边的向下箭头选择“显示原始选项”。这将向您展示接收到的内容。

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

在我的Gmail Web客户端测试中，如果我在单个电子邮件中发送了30张不同尺寸的图片，则会有少数几张无法成功加载，只会显示图像容器但不显示图像。如果发生这种情况，请尝试重新加载页面。

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

Chrome（最新版本）需要重新加载几次才能成功加载/显示所有30张图片
无论重新加载次数如何，Opera（最新版本）都无法成功显示所有30张图像
Firefox（最新版本）始终可以显示所有30张图片，没有问题
Internet Explorer 9（最新版本）始终可以显示所有30张图片，没有问题
Safari（最新版本）始终可以显示所有30张图片，没有问题