26

我正在尝试使用以 base 64 数据 URL 编码的图像在 HTML 中进行签名。这是一个例子：

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

它与 Mac 上的 Mail 或 Thunderbird 等邮件软件很好用，但不适用于 gmail、outlook、roundcube、hotmail 等 webmail ......

你知道如何让它工作吗？我真的很想把那些图片直接放在源代码中，这样更实用。

4

2 回答 2

26

简单的答案？

你不能。Gmail、outlook 等将忽略 base64 图像。

查看此站点以了解有关此的更多信息

在此处输入图像描述

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

于 2012-10-24T14:18:00.390 回答
2

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

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

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

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

最终解决方案如下：

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}
<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

但我个人不喜欢这样，因为我不希望客户端询问用户是否要加载额外的资源。

于 2016-09-17T21:41:50.833 回答