Gmail 中未显示 HTML 图像

Posted 2023-02-16

【中文标题】Gmail 中未显示 HTML 图像

【英文标题】：HTML image not showing in Gmail

【发布时间】：2014-02-21 15:49:39

【问题描述】：

我正在发送 html 格式的电子邮件通讯。 在 HTML 里面我有类似的东西

<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>

当我使用 Thunderbird 或 Outlook 打开时事通讯时，图像正在显示。但是，当我使用 Gmail 打开它时，没有显示任何图像。 我不确定这是否与 Gmail 出于安全原因使用的代理有关，还是其他原因。无论哪种方式，我都想知道是否有人遇到过这个问题，如果有，是如何解决的。

【问题讨论】：

Gmail 显示的实际 <img> 标签是什么（在 Gmail 中打开浏览器检查器）？它使用什么网址？

它使用预期的 url：theProxyUrl#myURL。问题不是 gmail 代理本身，而是图像无法访问。 Thunderbird 和 Outlook 工作得很好，因为它们不使用中间服务器来访问图像。问题解决了。还是谢谢你！

【参考方案1】：

尝试将title 和alt 属性添加到您的图像中...... Gmail 和其他一些阻止没有某些属性的图像.. 将您的电子邮件包含为垃圾邮件也是一种逻辑。

【参考方案2】：

您可能在您的 gmail 设置中将它们关闭，这是更改它们的链接https://support.google.com/mail/answer/145919?hl=en

此外，gmail 可能会阻止认为它们可疑的图像。

来自上面的链接。

Gmail 如何确保图片安全

一些发件人试图以有害的方式使用外部链接的图片，但 Gmail 会采取措施确保安全加载图片。邮箱 通过 Google 的图片代理服务器提供所有图片并进行转码 他们在交付前通过以下方式保护您：

发件人无法使用图片加载来获取您的 IP 等信息 地址或位置。发件人无法在您的 浏览器。 Gmail 会检查您的图片是否存在已知病毒或恶意软件。在 在某些情况下，发件人可能能够知道个人是否拥有 打开带有独特图像链接的消息。与往常一样，Gmail 会扫描每个 可疑内容的邮件以及 Gmail 是否认为发件人或 消息可能可疑，图像将不会显示，您将 系统会询问您是否要查看这些图像。

【讨论】：

谢谢，但当我第一次遇到它时，我就是这么想的。不是这样：“始终显示来自此发件人的图像”

@Rita gmail 可能仍会阻止图像，如果他们认为图像可疑，请尝试将图像托管在 imgur.com 等知名 img 网站上，然后对其进行测试。

【参考方案3】：

Google 只允许来自可信来源的图片。

所以我通过将我的图片托管在谷歌驱动器中并将其网址用作我的图片的来源来解决了这个问题。

示例： 和： http://drive.google.com/uc?export=view&id=FILEID'>

要形成网址，请refer here。

【讨论】：

简短但很有帮助。

为什么是@samuelkobe

@samuelkobe 截至 2018 年中期，我们似乎仍然可以做到这一点

@PhoenixB 我相信我可能被误导了。我不确定我 2 年前读了什么。我的坏人。删除了我的旧评论。

谢谢兄弟，这对我有帮助

【参考方案4】：

还请检查您的编码：Google 将空格编码为 + 而不是 %20。这可能会导致图片链接无效。

【讨论】：

我没有空格的图片在 Gmail 和 Yahoo 邮件中显示正常。我的带有空格的图片不会显示在 Gmail 或 Yahoo 邮件中。所以我认为要么这是问题所在，要么两个客户都出于其他原因不喜欢图像名称中的空格。

是的，在我们的图像路径上，我们有一个空间。使用 _ 而不是为我们解决了这个问题。

【参考方案5】：

派对迟到了，但这里开始......我也遇到过这个问题，并通过以下方式解决：

在 src url 中包含方案（使用“//”不起作用 - 使用完整方案 EG：“https://”） 包括宽度和高度属性 包括 style="display:block" 属性 包括 alt 和 title 属性

EG：

<img src="https://static.mydomain.com/images/logo.png"  title="Logo" style="display:block"   />

【讨论】：

width & height 帮我搞定了

我引用了一个以“//”开头的 AWS S3 URL。替换为“https://”修复了它。

我正在使用 https://、alt、title、width、height 和 style="display:block" 但没有显示在我的电子邮件中的 html 图像中...请帮助我。

@user3076732 你发现了吗？

另请注意，如果您的图像是 SVG，它也不会工作（即使有上述所有建议），您需要将其转换为 PNG 或其他支持的格式。见：***.com/a/33151666/1852005

【参考方案6】：

HTTP 或 HTTPS 应该是完整地址

背景图片：url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg)

var mailOptions = 
  from: '[e-mail]',
  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>'
;

【参考方案7】：

对我来说，问题在于使用 svg 图像。我将它们切换为 png 并且它起作用了。

【参考方案8】：

我知道 Gmail 已经解决了上面的所有问题，现在就解决了 alt 之类的问题。

这与问题无关，但可能有人和我有同样的经历。

所以我的网页设计师使用 "image" 标签而不是 "img"，但症状是一样的。它适用于 Outlook，但不适用于 Gmail。 我花了一个小时才意识到。唉，真是浪费时间。

所以请确保标签是 "img" 而不是 "image"。

【讨论】：

确实，永远不要忘记寻找显而易见的东西（我已经切换了我的 LOGO_URL 和 SITE_URL）。

【参考方案9】：

我什至迟到了这个聚会，但是在花了大约 2 小时尝试了所有可以想象的事情并且没有任何运气之后，我终于意识到如果我将照片上传到 GOOGLE PHOTOS 而不是 GOOGLE DRIVE 就可以了。然后我可以右击图片，复制地址，粘贴进去，效果很好。

【参考方案10】：

我的问题类似。 这就是我在 gmail 上测试 IMG 标签的经验 （假设大多数组织都有一个 dev qa 和 prod 服务器。）

我必须使用他们的个人电子邮件 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

所以发送到我的 gmail id 的图像如下所示对我没有用

<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">

我们的开发服务器无法通过在 Chrome（或任何浏览器）上点击以下 URL 来呈现此图像。

https://www.devserver.com/folder1/folder2/myactualimage.jpg

现在只要 src 上有 www，它就一直工作，我们不必添加任何其他属性。

<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">

【参考方案11】：

除了霍华德所说的

您必须记住，Google 将空格编码为 + 为避免这种情况，ulr 必须在 RFC 3986 中进行编码，这意味着在 %20 处编码的空格，例如：

https://example.com/My Folder/image 1.jpg 到 https://example.com/My%20Folder/image%201.jpg

【参考方案12】：

我注意到 Google 正在从我的 img 标签中删除 src 属性。我尝试了此页面上的每个答案 - 没有运气。

最终对我有用的是用具有背景图像的 div 替换 img 标签。例如，而不是：

<img style="height: 24px; width: 24px; display: block;" src="IMAGE SOURCE"/>

我将其替换为：

<div style="height: 24px; width: 24px; display: block; background: url(IMAGE SOURCE); background-size: contain;"></div>

希望这可以帮助那些花了太长时间把头发拉出来的其他人。

【讨论】：

就我而言，这是行之有效的解决方案。

【参考方案13】：

在后端我创建了显示图像的端点。 Laravel 代码如下：

 public function getImage($name)
 
        return response()->file(base_path() . '/resources/img/' . $name . '.png');
 

然后在我的 html 电子邮件模板中，我使用背景图像创建了 div。

<div style='background: url("https://mysite1.com/api/v1/get_image/logo")'></div>

它对我有用。