如何在 HTML 中成功嵌入图像以在 webmail 客户端中显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13049453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to successfully embed images in HTML for display in webmail clients?
提问by frénésie
I'm trying to do a signature in HTML using images that are encoded in base 64 data URLs. Here's an example:
我正在尝试使用以 base 64 数据 URL 编码的图像在 HTML 中进行签名。下面是一个例子：
<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">
It's working nice with mail software as Mail on Mac or Thunderbird but it's not working with webmail such as gmail, outlook, roundcube , hotmail ...
它适用于 Mac 或 Thunderbird 上的邮件等邮件软件，但不适用于网络邮件，例如 gmail、outlook、roundcube、hotmail ...
Have you any idea how to make it work ? I really want to put those images directly in the source code, it's more practical.
你知道如何让它工作吗？真想把那些图片直接放在源码里，比较实用。
回答by Mark
simple answer?
简单的答案？
You can't. Gmail, outlook etc will ignore base64 images.
你不能。Gmail、Outlook 等将忽略 base64 图像。
Look at this site to learn more about this
So based on our results, it is clearly not worth using embedded images in your emails. All you will be doing is forcing people to download encoded images that they will not be able to view.
因此，根据我们的结果，在电子邮件中使用嵌入图像显然是不值得的。您要做的就是强迫人们下载他们无法查看的编码图像。
回答by borisdiakur
I'm using embedded SVG, here is why:
我正在使用嵌入式 SVG，原因如下：
- It looks nice (vector graphics work well for logos).
- No attachment (even images mailed as so called hidden email attachments are visible as such in many email clients).
- No additional http request (works offline, once downloaded).
- No “Do you want to load the images..” question.
- It's ok for me, if it doesn't display in Gmail and Outlook. It's kind of graceful degradation.
- 它看起来不错（矢量图形适用于徽标）。
- 没有附件（即使作为所谓的隐藏电子邮件附件邮寄的图像在许多电子邮件客户端中也是可见的）。
- 没有额外的 http 请求（离线工作，下载后）。
- 没有“你想加载图像吗……”问题。
- 如果 Gmail 和 Outlook 中没有显示，那对我来说没问题。这是一种优雅的退化。
But if you really want to display images in Gmail and Outlook, you will need to load these via HTTP.
但是，如果您真的想在 Gmail 和 Outlook 中显示图像，则需要通过 HTTP 加载这些图像。
The guy from CSS-tricks has a nice guide on SVG in email: https://css-tricks.com/a-guide-on-svg-support-in-email/
来自 CSS-tricks 的家伙在电子邮件中有一个很好的 SVG 指南：https: //css-tricks.com/a-guide-on-svg-support-in-email/
The final solution is the following:
最终的解决方案如下：
/* 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">But I personally don't like it, because I don't want a client to ask the user if he wants to load additional resources.
但是我个人不喜欢它，因为我不希望客户端询问用户是否要加载其他资源。
