即使用户允许，Gmail 也会隐藏外部电子邮件图片-前端问题

Gmail hides external e-mail images, even after user allows them(即使用户允许，Gmail 也会隐藏外部电子邮件图片)

本文介绍了即使用户允许，Gmail 也会隐藏外部电子邮件图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在 html 电子邮件中插入带有图像的签名.我在使用 GMail 时遇到了一些问题(它在 iPhone 客户端上运行良好).

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 :

每个图像的 HTML 是:

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

不知道 Gmail 是做什么的，有人有想法吗?
Don't know what Gmail does this, does somebody has an idea ?
编辑

原图标签:
<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" />

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

<h4 class="h4">Si vous avez une seconde, vous pouvez évaluer ma réponse :</h4></div></td></tr><tr><td align="center" valign="top"><表格边框="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border-color:#FFFFFF"><身体><tr><td valign="top" width="180" class="leftColumnContent"><表格边框="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF"><tbody><tr><td valign="顶部"><a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Happy" style="text-decoration: none;outline: none; "标题="邦尼"><img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.png" alt="Bonne" width="80" height="80" style="border :无；宽度:80px；显示:块；左边距:自动；右边距:自动；"/><div style="text-align: center;"><h4 class="h4" style="text-decoration: underline; color:#50b748; margin-bottom:0;">Bonne</h4><span style="color:#50b748;">快速、实用和农业.</span></div></a></td></tr></tbody></table></td><td valign="top" width="180" class="centerColumnContent"><表格边框="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF"><tbody><tr><td valign="顶部"><a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Neutral" style="text-decoration: none;outline: none; margin-底部:0；"标题="莫耶纳" ><img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/neutral.png" alt="Moyenne" width="80" height="80" style="border :0；显示:块；宽度:80px；左边距:自动；右边距:自动；"><div style="text-align: center;"><h4 class="h4" style="text-decoration: underline; color:#ffd300; margin-bottom:0;">Moyenne</h4><span style="color:#ffd300;">可以接受，不满意.</span></div></a></td></tr></tbody></table></td><td valign="top" width="180" class="rightColumnContent"><表格边框="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF"><tbody><tr><td valign="顶部"><a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Unhappy" style="text-decoration: none;outline: none;"标题="淡紫色"><img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.png" alt="Mauvaise" width="80" height="80" style="border :0；宽度:80px；显示:块；左边距:自动；右边距:自动；"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></表></td></tr></tbody></表></中心>

Thanks

谢谢

推荐答案

这种属性不是 Gmail 添加的，而是浏览器正在使用的插件 - 特别是 AdblockPlus 插件(恰好在他们的过滤器中有 smartadserver.com).您的 HTML 在 Gmail 中运行良好，否则我试了一下.

You can display it in your browser by disabling the plugin or removing smartadserver.com from the Adblock filter list.

您可以通过禁用插件或从 Adblock 过滤器列表中删除 smartadserver.com 在浏览器中显示它.

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.

但是...如果您想防止这种情况发生在其他人身上...将图片托管在另一台服务器上，这样该域就不会被广告过滤器列入黑名单.p>

另外一个兼容性说明...一些邮件客户端不支持 png 图像格式.

Also for another compatibility note ... some mail clients were not supporting png image format.

这篇关于即使用户允许，Gmail 也会隐藏外部电子邮件图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！