HTML图片未在Gmail中显示

时间:2014-01-29 17:10:40

标签: html gmail

我正在发送HTML格式的电子邮件简报。 在HTML内部我有类似

的内容

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

当我使用Thunderbird或Outlook打开简报时,正在显示图像。但是,当我使用Gmail打开它时,不会显示任何图像。 我不确定这是关于Gmail出于安全原因使用的代理还是其他内容。无论哪种方式,我想知道是否有人遇到过这种情况,如果有的话,它是如何解决的。

13 个答案:

答案 0 :(得分:37)

参加派对的时间已经过去了......我也遇到了这个问题,并通过以下方式解决了这个问题:

  • 在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" />

答案 1 :(得分:22)

Google仅允许来自可靠来源的图片。

所以我通过在谷歌硬盘中托管我的图片并使用其网址作为我的图片的来源解决了这个问题。

实施例: 有: http://drive.google.com/uc?export=view&id=FILEID'>

要形成网址refer here

答案 2 :(得分:7)

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

答案 3 :(得分:5)

尝试向您的图片添加titlealt属性.... Gmail和其他一些网站会阻止没有某些属性的图片..这也是一个包含您的电子邮件的逻辑垃圾邮件。

答案 4 :(得分:5)

你可能在gmail设置中关闭了它们,继续更改它们的链接https://support.google.com/mail/answer/145919?hl=en

gmail也可能会阻止他们认为可疑的图像。

来自上面的链接。

  

Gmail如何确保图片安全

     

有些发件人试图以有害的方式使用外部链接的图像,但是   Gmail会采取措施确保安全加载图片。 Gmail的   通过Google的图像代理服务器和转码提供所有图像   它们在交付之前以下列方式保护您:

     

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

答案 5 :(得分:2)

除了霍华德所说的

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

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

答案 6 :(得分:2)

我注意到Google从我的img标签中剥离了src属性。我尝试了此页面上的所有答案-没运气。

最终对我有用的是将img标签替换为具有背景图片的div。例如,代替:

<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>

希望这可以帮助那些花费太长时间的人将头发拉出来。

答案 7 :(得分:1)

HTTP或HTTPS应为完整地址

background-image:url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg

var mailOptions = {
  from: 'fulladdress@gmail.com',
  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>'
};

答案 8 :(得分:1)

对我来说,问题在于使用svg图片。我将它们切换为png,效果很好。

答案 9 :(得分:1)

我知道Gmail现在已经解决了上述所有问题,包括alt和其他内容。

这与问题无关,但可能有人和我一样。

因此,我的Web设计人员使用“图片” 标记代替了“ img” ,但是症状是相同的。它适用于Outlook,但不适用于Gmail。
我花了一个小时才意识到。 igh,真是浪费时间。

因此请确保标记也是“ img” 而不是“图像”

答案 10 :(得分:0)

我什至晚了参加这次聚会,但是花了大约2个小时尝试了所有可以想象的并且没有任何运气之后,我终于意识到,如果我将照片上传到GOOGLE PHOTOS而不是GOOGLE DRIVE,它将可以正常工作。然后,我可以在图片上单击鼠标右键,复制地址,并将其粘贴到其中,这样可以很好地工作。

答案 11 :(得分:0)

我的问题很相似。 这就是我在测试gmail上的IMG标签方面的经验 (假设该组织的大多数机构都将拥有一个开发人员质量保证和生产者服务器。)

我必须通过客户的个人电子邮件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">

答案 12 :(得分:0)

在后端,我创建了用于显示图像的端点。 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>

它对我有用。