HTML 图像未显示在 Gmail 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21437916/
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
HTML image not showing in Gmail
提问by Rita
I'm sending an e-mail newsletter in HTML. Inside the HTML I have something like
我正在发送 HTML 格式的电子邮件通讯。在 HTML 里面，我有类似的东西
<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>
<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>
When I open the newsletter with Thunderbird or Outlook, the image is being displayed. However, when I open it with Gmail, no image is shown. I'm not sure if it's about the proxy that Gmail uses for security reasons or if it's something else. Either way, I'd like to know if anyone ever came across this and if so, how it was solved.
当我用 Thunderbird 或 Outlook 打开时事通讯时，图像正在显示。但是，当我用 Gmail 打开它时，没有显示图像。我不确定这是否与 Gmail 出于安全原因使用的代理有关，还是其他原因。无论哪种方式，我都想知道是否有人遇到过这个问题，如果有，它是如何解决的。
回答by Howard
Late to the party but here goes... I have experienced this problem as well and it was solved with the following:
聚会迟到了，但这里是......我也遇到过这个问题，并通过以下方式解决了：
- Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
- Including width and height attributes
- Including style="display:block" attribute
- Including both alt and title attributes
- 在 src url 中包含方案（使用“//”不起作用 - 使用完整方案 EG：“https://”）
- 包括宽度和高度属性
- 包括 style="display:block" 属性
- 包括 alt 和 title 属性
EG:
例如：
<img src="https://static.mydomain.com/images/logo.png" alt="Logo" title="Logo" style="display:block" width="200" height="87" />
回答by Sachin Gade
Google only allows images which are coming from trusted source .
Google 只允许来自可信来源的图像。
So I solved this issue by hosting my images in google drive and using its url as source for my images.
所以我通过在谷歌驱动器中托管我的图像并使用它的 url 作为我的图像源来解决这个问题。
Example: with: http://drive.google.com/uc?export=view&id=FILEID'>
示例：使用：http://drive.google.com/uc?export=view&id=FILEID'>
to form URL please refer here.
要形成 URL，请参阅此处。
回答by Ruben Miquelino
For me, the problem was using svg images. I switched them to png and it worked.
对我来说，问题是使用 svg 图像。我将它们切换为 png 并且它起作用了。
回答by pHOW
Please also check your encoding: Google encodes spaces as +instead of %20. This may result in an invalid image link.
也请检查您的编码：谷歌编码空格作为+代替%20。这可能会导致图像链接无效。
回答by codeaddict
You might have them turned off in your gmail settings, heres the link to change them https://support.google.com/mail/answer/145919?hl=en
您可能在 Gmail 设置中关闭了它们，这是更改它们的链接https://support.google.com/mail/answer/145919?hl=en
Also gmail may be blocking the images thinking they are suspicious.
此外，gmail 可能会阻止图像，认为它们是可疑的。
from the link above.
从上面的链接。
How Gmail makes images safe
Some senders try to use externally linked images in harmful ways, but Gmail takes action to ensure that images are loaded safely. Gmail serves all images through Google's image proxy servers and transcodes them before delivery to protect you in the following ways:
Senders can't use image loading to get information like your IP address or location. Senders can't set or read cookies in your browser. Gmail checks your images for known viruses or malware. In some cases, senders may be able to know whether an individual has opened a message with unique image links. As always, Gmail scans every message for suspicious content and if Gmail considers a sender or message potentially suspicious, images won't be displayed and you'll be asked whether you want to see the images.
Gmail 如何确保图片安全
一些发件人试图以有害的方式使用外部链接的图片，但 Gmail 会采取措施确保安全加载图片。Gmail 通过 Google 的图像代理服务器提供所有图像，并在交付前对它们进行转码，以通过以下方式保护您：
发件人无法使用图片加载来获取您的 IP 地址或位置等信息。发件人无法在您的浏览器中设置或读取 cookie。Gmail 会检查您的图片是否存在已知病毒或恶意软件。在某些情况下，发件人可能能够知道个人是否打开了带有唯一图像链接的消息。与往常一样，Gmail 会扫描每封邮件中的可疑内容，如果 Gmail 认为某个发件人或邮件可能可疑，则不会显示图片，并且系统会询问您是否要查看这些图片。
回答by Hugo S. Mendes
Try to add titleand altproperties to your image.... Gmail and some others blocks images without some attributes.. and it is also a logic to include your email to be read as spam.
尝试为您的图像添加title和alt属性.... Gmail 和其他一些阻止没有某些属性的图像.. 将您的电子邮件包含为垃圾邮件也是一种逻辑。
回答by D V Yogesh
HTTP or HTTPS should be full address
HTTP 或 HTTPS 应为完整地址
background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg)
背景图片：网址（http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg）
var mailOptions = {
from: '[email protected]',
to: emails,
subject: 'i super another ma node mailer cool test',
text: 'That was easy!',
html: '<a href="//google.com"><div style="background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg);width:500px;height:500px">ascfas</div></a>'
};
回答by Esgi Dendyanri
I know Gmail already fix all the problem above, the alt and stuff now.
我知道 Gmail 现在已经解决了上述所有问题，alt 和其他内容。
And this is unrelated to the question but probably someone experiences the same as me.
这与问题无关，但可能有人和我有同样的经历。
So my web designer use "image"tag instead of "img", but the symptom was the same. It works on outlook but not Gmail.
It takes me an hour to realize. Sigh, such a waste of time.
所以我的网页设计师使用"image"标签而不是"img"，但症状是一样的。它适用于 Outlook，但不适用于 Gmail。
我需要一个小时才能意识到。唉，真是浪费时间。
So make sure the tag is "img"not "image"as well.
因此，请确保标签也是“img”而不是“image”。
回答by Sandeep
My issue was similar. This is what my experience has been on testing the IMG tag on gmail (assuming most of the organization's would have a dev qa and prod server.)
我的问题是类似的。这就是我在 gmail 上测试 IMG 标签的经验（假设大多数组织都有一个 dev qa 和 prod 服务器。）
I had to send emails to customers on their personal email id's and we could see that gmail would add something of its own like following to src attribute of img tag. Now when we were sending these images from our dev environment they would never render on gmail and we were always curious why?
我不得不用他们的个人电子邮件 ID 向客户发送电子邮件，我们可以看到 gmail 会添加一些自己的东西，比如以下内容到 img 标签的 src 属性。现在，当我们从我们的开发环境发送这些图像时，它们永远不会在 gmail 上呈现，我们总是好奇为什么？
https://ci7.googleusercontent.com/proxy/AEF54znasdUhUYhuHuHuhHkHfT7u2w5zsOnWJ7k1MwrKe8pP69hY9W9eo8_n6-tW0KdSIaG4qaBEbcXue74nbVBysdfqweAsNNmmmJyTB-JQzcgn1j=s0-d-e2-ft#https://www.prodserver.com/Folder1/Images/OurImage.PNG
so an image sent to my gmail id as following never worked for me
所以发送到我的 gmail id 的图像如下从未对我有用
<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">
and our dev server we can't render this image by hitting following URL on Chrome(or any browser).
和我们的开发服务器，我们无法通过在 Chrome（或任何浏览器）上点击以下 URL 来呈现此图像。
https://www.devserver.com/folder1/folder2/myactualimage.jpg
now as long as the src has www on it worked all the time and we didnt had to add any other attributes.
现在只要 src 上有 www 就可以一直工作，我们不必添加任何其他属性。
<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">
回答by Carlos Poma
In addition to what was said by Howard
除了霍华德所说的
You have to keep in mind that Google encodes spaces as +To avoid this, the ulr must be encoded in RFC 3986, which means spaces encoded at %20, for example:
您必须记住，Google 将空格编码为 as+为避免这种情况，必须在 RFC 3986 中对 ulr 进行编码，这意味着空格编码为%20，例如：
https://example.com/My Folder/image 1.jpgtohttps://example.com/My%20Folder/image%201.jpg
https://example.com/My Folder/image 1.jpg到https://example.com/My%20Folder/image%201.jpg
