Gmail скрывает внешние изображения электронной почты даже после того, как пользователь разрешил их
Я пытаюсь вставить подпись с изображениями в html электронные письма. У меня есть некоторые проблемы с GMail (он отлично работает с клиентом iPhone).
Прежде чем пользователь примет изображения, они имеют правильный размер и виден альтернативный текст:
HTML для каждого изображения:
<img alt="Bonne" width="80" height="80">
Так что это нормально, но когда пользователь нажимает кнопку «Разрешить изображения в этом сообщении» (не знаю точной метки на английском), они просто исчезают:
Если я осматриваю элемент, я вижу, что был добавлен некоторый код, чтобы скрыть их:
<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, у кого-нибудь есть идея?
EDIT
Исходный тег изображения:
<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>
Спасибо