如何成功地将图像嵌入HTML以在webmail客户端中显示?

如何成功地将图像嵌入HTML以在webmail客户端中显示?,html,format,base64,webmail,Html,Format,Base64,Webmail,我正在尝试使用在Base64数据URL中编码的图像在HTML中进行签名。 下面是一个例子: <img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg=="> 它可以很好地与Mac或Thunderbird上的邮件软件配合使用,但不能与gmail、outlook、roundcube、hotmail等网络邮件配合使用 你知道怎么做吗? 我真的想把这些图像直接放在源代码中,这样更实用 简单的答案 你不能。Gmail、outlook

我正在尝试使用在Base64数据URL中编码的图像在HTML中进行签名。 下面是一个例子:

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

它可以很好地与Mac或Thunderbird上的邮件软件配合使用,但不能与gmail、outlook、roundcube、hotmail等网络邮件配合使用

你知道怎么做吗? 我真的想把这些图像直接放在源代码中,这样更实用

简单的答案

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

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


我使用的是嵌入式SVG,原因如下:

  • 它看起来不错(矢量图形很适合徽标)
  • 没有附件(即使是以所谓隐藏电子邮件附件的形式发送的图像在许多电子邮件客户端中也是可见的)
  • 无其他http请求(下载后脱机工作)
  • 否“是否要加载图像…”问题
  • 如果它不显示在Gmail和Outlook中,对我来说没问题。这是一种优雅的堕落
但如果你真的想在Gmail和Outlook中显示图像,你需要通过HTTP加载这些图像

CSS tricks的家伙在电子邮件中提供了一个关于SVG的不错的指南:

最终解决方案如下:

/*将宽度和高度为零的元素调整为全尺寸*/
.炫耀{
身高:100%!重要;
宽度:100%!重要;
}


由于我使用了Base64图像,下面是代码(有点长):我还删除了所有信息,如链接、名称等,因为这是私有的。编辑:我使用的是透明图像,我用css样式修改背景图像。这可能更适合于这不是编程问题,您只需要在webmail签名中使用原始HTML。对于Gmail来说,它是不必要的,因为WYSIWYG编辑器是为签名提供的。好吧,但我怎样才能使它成为在每个接收者网络邮件?接收者上都有效的东西呢?这完全是另一个问题。问题是我在为一家公司签名。他们正在使用MAC上的邮件,所以它现在对他们有效,但他们向很多人发送邮件,他们不知道所有客户使用哪种邮件服务。所以我希望这个签名能兼容所有的邮件服务:)哦,废话:(我会尝试另一种方式。我会把源url放进去,然后把我的图片上传到我的服务器上。还是这样吗?