即使用户允许，Gmail也会隐藏外部电子邮件图像 [英] Gmail hides external e-mail images, even after user allows them
问题描述
我试图在html电子邮件中插入带有图像的签名。
我有一些与GMail有关的问题（对于iPhone客户端来说它可以正常工作）。
在用户接受图片之前，它们的大小合适，文字可见：
每张图片的HTML格式为：
< img alt =Bonnewidth =80height =80>
所以这是正常的，但是当用户点击允许这封电子邮件中的图片（不知道英文中的确切标签），他们只是消失：
如果我检查了元素，我可以看到添加了一些代码来隐藏它们：
< img src =http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.pngalt =Bonnewidth =0height =0style =display：none！important; visibility; hidden：hidden！important; opacity：0！important; background-position：80px 80px;>
不知道Gmail做了什么，是否有人有想法？
编辑
原始图片标记：
< img src =http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.pngalt =Mauvaisewidth =80 height =80style =border：0; width：80px; display：block; margin-left：auto; margin-right：auto; hspace =10/>
全球HTML：
< center>
< tbody>
< tr>
< td valign =top>
< div>
< h4 class =h4>如果您想要使用此功能，请点击此处：< / h4>
< / div>
< / td>
< / tr>
< tr>
< td align =centervalign =top>
< tbody>
< tr>
< td valign =topwidth =180class =leftColumnContent>
< table border =0cellpadding =20cellspacing =0width =100％style =border-color：#FFFFFF>
< tbody>< tr>
< td valign =top>
< a href =http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Happystyle =text-decoration：none; outline ：none;title =Bonne>
< img src =http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.pngalt =Bonnewidth =80height =80style =border：none; width：80px; display：block; margin-left：auto; margin-right：auto; />
< div style =text-align：center;>
< h4 class =h4style =text-decoration：underline; color：＃50b748; margin-bottom：0;> Bonne< / h4>
< span style =color：＃50b748;> Rapide，utile etagréable。< / span>
< / div>
< / a>
< / td>
< / tr>
< / tbody>< / table>
< / td>
< td valign =topwidth =180class =centerColumnContent>
< table border =0cellpadding =20cellspacing =0width =100％style =border-color：#FFFFFF>
< tbody>< tr>
< td valign =top>
< div style =text-align：center;>
< h4 class =h4style =text-decoration：underline; color：＃ffd300; margin-bottom：0; > Moyenne< / H4>
< span style =color：＃ffd300;>可接受，mais insufisant。< / span>
< / div>
< / a>
< / td>
< / tr>
< / tbody>< / table>
< / td>
< td valign =topwidth =180class =rightColumnContent>
< table border =0cellpadding =20cellspacing =0width =100％style =border-color：#FFFFFF>
< tbody>< tr>
< td valign =top>
< div style =text-align：center;>
< h4 class =h4style =text-decoration：underline; color：＃be1e2d; margin-bottom：0;> Mauvaise< / h4>
< span style =color：＃be1e2d;> Malheureusement，je n'en suis pas satisfait。< / span>
< / div>
< / a>
< / td>
< / tr>
< / tbody>< / table>
< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< / tbody>
< / table>
< / center>
谢谢
您的HTML在Gmail中完美运行，否则我会试用。
您可以通过禁用插件或从中删除smartadserver.com来在浏览器中显示它Adblock过滤列表。
但是，如果您想防止这种情况发生在其他人身上...... 将图像托管到另一台服务器上，以便该域名将不会被列入黑名单。
另外，对于其他兼容性说明...某些邮件客户端不支持png图像格式。 p>
I'm trying to insert a signature with images in html e-mails. I have some issues with GMail (it works fine with the iPhone client).
Before the user accepts the image, they are properly sized, and the alt text is visible :
The HTML for each image is then :
<img alt="Bonne" width="80" height="80">
So this is normal, but when the user clicks on "Allow images in this e-mail" (don't know the exact label in english), they simply disappear :
If I inspect the element, I can see that some code has been added to hide them :
<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.png" alt="Bonne" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 80px 80px; ">
Don't know what Gmail does this, does somebody has an idea ?
EDIT
Original image tag :
<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.png" alt="Mauvaise" width="80" height="80" style="border : 0; width:80px; display: block; margin-left: auto; margin-right: auto;" hspace="10" />
Global HTML :
<center>
<table border="0" cellpadding="0" cellspacing="0" id="backgroundTable" style="border-color:#FFFFFF" >
<tbody>
<tr>
<td valign="top">
<div >
<h4 class="h4">Si vous avez une seconde, vous pouvez évaluer ma réponse :</h4>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border-color:#FFFFFF">
<tbody>
<tr>
<td valign="top" width="180" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
<tbody><tr>
<td valign="top">
<a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Happy" style="text-decoration: none;outline: none; " title="Bonne">
<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.png" alt="Bonne" width="80" height="80" style="border : none; width:80px; display: block; margin-left: auto; margin-right: auto;" />
<div style="text-align: center;">
<h4 class="h4" style="text-decoration: underline; color:#50b748; margin-bottom:0;">Bonne</h4>
<span style="color:#50b748;">Rapide, utile et agréable.</span>
</div>
</a>
</td>
</tr>
</tbody></table>
</td>
<td valign="top" width="180" class="centerColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
<tbody><tr>
<td valign="top">
<a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Neutral" style="text-decoration: none;outline: none; margin-bottom:0;" title="Moyenne" >
<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/neutral.png" alt="Moyenne" width="80" height="80" style="border : 0; display: block; width:80px; margin-left: auto; margin-right: auto;" >
<div style="text-align: center;">
<h4 class="h4" style="text-decoration: underline; color:#ffd300; margin-bottom:0;" >Moyenne</h4>
<span style="color:#ffd300;">Acceptable, mais insufisant.</span>
</div>
</a>
</td>
</tr>
</tbody></table>
</td>
<td valign="top" width="180" class="rightColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
<tbody><tr>
<td valign="top">
<a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Unhappy" style="text-decoration: none;outline: none;" title="Mauvaise">
<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.png" alt="Mauvaise" width="80" height="80" style="border : 0; width:80px; display: block; margin-left: auto; margin-right: auto;" hspace="10" />
<div style="text-align: center; ">
<h4 class="h4" style="text-decoration: underline; color:#be1e2d; margin-bottom:0;">Mauvaise</h4>
<span style="color:#be1e2d;">Malheureusement, je n'en suis pas satisfait.</span>
</div>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
Thanks
That kind of attribute is not added by Gmail but a plugin that the browser is using - in particular AdblockPlus plugin (that happens to have smartadserver.com in their filters). Your HTML is working perfectly in Gmail otherwise, I tried it out.
You can display it in your browser by disabling the plugin or removing smartadserver.com from the Adblock filter list.
However ... if you want to prevent this to happen to other people ... host the images ad another server, so that the domain won't be blacklisted with ad filters.
Also for another compatibility note ... some mail clients were not supporting png image format.
这篇关于即使用户允许，Gmail也会隐藏外部电子邮件图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
