Question

我有一个嵌入式HTML电子邮件，其中我正在使用base64编码图像。通过chrome访问时，图像不会显示在Gmail中。但通过邮件客户端（Mac上的Mail应用程序）访问相同的邮件时，它可以正常工作。我已正确设置标题。有什么想法吗？

我的代码

<html>
    <body>Hi
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAREAAAALCAYAAABYrrnHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABANpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjVEMjA4OTI0OTNCRkRCMTE5MTRBODU5MEQzMTUwOEM4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVGMjU1MzZBQUVGQjExRTc5NUQyQTc1MzA0RERGMTVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVGMjU1MzY5QUVGQjExRTc5NUQyQTc1MzA0RERGMTVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIElsbHVzdHJhdG9yIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0idXVpZDpiNDQ5NzVjYy00YmI1LTRmNzAtODRiZi0zMGU2NjFkYmY3ZDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZDc1MTVmZDQtMjkzZS00ZWI5LWFiMjQtOTMzYzRkZjNmOTY4Ii8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+bXRrYV9hY3RpdmF0aW9uX2NhcmQ8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr6AOtYAAABESURBVHja7NZBDQAwCARB2tS/m6qoKIoGvswkGNjHhQgAAACAeVbdkwHoOnVXBqD9iWSmCkDblgAwIoARAYwIMNAXYACy9wSMWMVdzAAAAABJRU5ErkJggg==" width="273" height="11" alt="">
    </body>
</html>

标题

Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Answer 1

电子邮件中不支持base64编码图像。大多数网络电子邮件客户端（包括Gmail）不支持这些图像，并且在Outlook中完全阻止了这些图像。 Apple Mail是支持他们的为数不多的客户之一，这就是为什么你能够在那里看到它们而不是其他地方。

使用base64编码图像需要注意的另一件事是电子邮件文件大小。 Gmail应用（iOS，Android）和Outlook（iOS）会截断文件大小超过102KB的电子邮件。远程引用的图像（例如<img src="http://www.website.com/image.png">不计入电子邮件的文件大小，但是base64编码的图像执行 ，并且可以快速清除电子邮件的文件大小。 102KB限制。还有其他需要考虑的事项。

Answer 2

gmail似乎也不支持直接编码的图像（非bease64）：(-我在以下代码段中编写了将图像从base64转换为直接形式并通过电子邮件发送的方法-但仍然看不到任何图像:(为了解决此问题，您需要使用cid将图像添加为附件，并在img标签<img src="cid:123456">中使用该cid-更多详细信息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'>

Base64编码的图像未在gmail

2 个答案: