如何在 HTML 电子邮件模板中嵌入图像？答案

【问题标题】：How to embed image in HTML email template?如何在 HTML 电子邮件模板中嵌入图像？
【发布时间】：2017-08-31 22:20:54
【问题描述】：

我从头开始使用HTML 和内联样式创建了一个电子邮件模板。现在我需要添加一些图像，此时无法使用 url，因为它不是托管的。我尝试使用 base64 编码，它在 Apple 邮件客户端中工作，但图像未在 Gmail 中呈现。有没有办法在所有电子邮件客户端都支持的 html 中嵌入图像？

【问题讨论】：

你是如何将 base64 图像嵌入到你的 html 中的？
@repzero 我使用在线服务将图像转换为base64，然后将数据放入src 属性中。它适用于浏览器和苹果邮件客户端，但不适用于 Gmail。我发现包括 Gmail 在内的许多电子邮件客户端都不支持它
你可以在imgur.com/upload上传图片，然后你就可以使用图片src URL了。
@VipinRaunchhela 我已经在 Google Drive 中托管了这张图片，谢谢大家..
@vipin 不推荐在公共或免费服务上托管。有时，您最终可能会超出带宽或类似情况。 Ajay 托管在 Google Drive 上会很好，如果是您公司的 Gmail 地址（信誉）会更好

标签： html css email-templates xhtml-transitional

【解决方案1】：

通过分享“在网络上公开”或“知道该链接的任何人”链接，在 Google 云端硬盘 中公开托管图片。然后使用此链接http://drive.google.com/uc?export=view&id=FILE_ID 直接访问图像。您应该将 FILE_ID 替换为 Google Drive 链接中的实际 ID。

例子：

Google 云端硬盘链接：https://drive.google.com/file/d/17iWczcf1T_D4kGRaQYBh6J2XOQI181u6/view?usp=sharing

生成的链接：http://drive.google.com/uc?export=view&id=17iWczcf1T_D4kGRaQYBh6J2XOQI181u6

现在您可以在模板中使用此链接。

【讨论】：

链接不再活跃。弹出404错误
@Sujoy 实际上，您不必担心可以按照上述方法创建自己的确切链接。无论如何，我已经更新了链接。编码愉快！

【解决方案2】：

Base64 的支持非常有限。一般来说，不建议使用它。您可以在this tutorial 中找到有关 base64 编码支持的信息。在您的情况下，确定支持的客户列表是否足够可能会有所帮助。

通过将图像与电子邮件一起发送并使用img 标签引用发送的图像，可以在电子邮件中嵌入图像。此方法的入门读物是 Campaignmonitor 的“Embedding images revisited”博文。

最好的解决方案是通过服务提供商托管图像，这既快速又维护。如果您使用 Github，您还可以从存储库的 GH-Pages 分支提供图像（或任何其他内容）。

【讨论】：