如何在HTML中成功嵌入图像以便在webmail客户端中显示？

Question

我正在尝试使用基本64位数据网址编码的图像在HTML中进行签名。 这是一个例子：

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

它在邮件软件上运行良好，如Mac或Thunderbird上的Mail，但它不能与gmail，outlook，roundcube，hotmail等webmail一起使用......

您知道如何让它发挥作用吗？ 我真的想把这些图像直接放在源代码中，它更实用。

Answer 1

简单的回答？

你不能。 Gmail，Outlook等会忽略base64图片。

Look at this site to learn more about this

  

因此，根据我们的结果，显然不值得在电子邮件中使用嵌入式图像。你所要做的就是强迫人们下载他们无法查看的编码图像。

Answer 2

我正在使用嵌入式SVG，原因如下：

• 它看起来不错（矢量图形适用于徽标）。
• 没有附件（即使图像邮寄为所谓的隐藏电子邮件附件，在许多电子邮件客户端中也是如此）。
• 没有额外的http请求（脱机工作，下载后）。
• 否“你想加载图片......”问题。
• 如果它不在Gmail和Outlook中显示，那对我没问题。这是一种优雅的退化。

但如果您真的想在Gmail和Outlook中显示图片，则需要通过HTTP加载这些图片。

来自CSS-tricks的人在电子邮件中有一个很好的SVG指南：https://css-tricks.com/a-guide-on-svg-support-in-email/

最终解决方案如下：

＆＃13;

＆＃13;

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

＆＃13;

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

＆＃13;

＆＃13;

＆＃13;

但我个人不喜欢它，因为我不希望客户询问用户是否要加载其他资源。