Question

我正在构建一个移动设备友好的电子邮件，当电子邮件最初加载时，主要图像不会加载（页脚中的小型facebook和twitter图标会加载）。我说，加载而不是显示bc，屏幕上没有任何红色x或任何指示那里应该有图像。但是，如果我回到收件箱并单击电子邮件再次查看它，图像加载就好了。我在网络电子邮件客户端，yahoo和gmail中的iPhone和Android上测试了这一点，并且它正在所有这些实例中发生。我过去收到了移动电子邮件，图片加载得很好，所以它必须是我的代码。我一直在听到时间找到答案，所以我希望这里有人熟悉这个问题，可以帮助我。如果您有疑问，请告诉我。非常感谢你的帮助。

注意：我发现它也没有在Safari中显示图像，但仅在首次加载时显示。重新加载页面时 - 就像在移动浏览器中一样，它会加载图像。

以下是Campaign Monitor的链接： http://testclient.createsend4.com/t/ViewEmail/y/8B8E5FE792737812

以下是代码：

<html>
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />


<title></title>

<style type="text/css">
<!--
img {display:block; border:0;}
body {
    background-color: #ffffff;
    -webkit-font-smoothing:antialiased; 
    -webkit-text-size-adjust:none;
    margin:0;
    padding:0;
} -->
</style>

</head>

<body bgcolor="#ffffff" style="width:100%;height:100%;">

<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>

<!-- HEADER -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" height="37" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td valign="bottom" style="text-align:center; color:#5b5a5a; font-size:11px;">
Email not displaying correctly? <webversion style="color:#5b5a5a; text-decoration:underline;">View it in your browser</webversion>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" height="34" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td style="color:#939497; text-align:center;"><a href="#" style="color:#5c9b14;font-size:13px;text-decoration:none;" target="_blank"><strong>Shop Online</strong></a> &nbsp;|&nbsp; <a href="#" style="color:#5c9b14;font-size:13px;text-decoration:none;" target="_blank"><strong>Find A Store</strong></a> &nbsp;|&nbsp; <a href="#" style="color:#5c9b14;font-size:13px;text-decoration:none;" target="_blank"><strong>Forward To A Friend</strong></a>
</td>
</tr>
</table>
</div>

<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><a href="http://beyondrto.com/" target="_blank"><img src="images/2959_BYRTO_July_emailer_06.png" width="100%" style="display:block;border:0;color:#ffffff;" alt="Beyond RTO Home Furnishings &amp; Appliances For Less." border="0" /></a></td>
</tr>
</table>
</div>
</td></tr>
</table>


<!-- PROMO -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">

<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><a href="http://beyondrto.com/campaign/hristmas_in_july" target="_blank"><img src="images/2959_BYRTO_July_emailer_07.jpg" border="0" width="100%" style="display:block;" alt="Celebrate Christmas in July - Register to Win $1000 Shopping Spree!"/></a></td>
</tr>
</table> 

<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_08.jpg" border="0" width="100%" style="display:block;" alt="Plus enjoy this bonus offer and SAVE!"/></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_09.jpg" width="100%" border="0" style="display:block;" alt="Reveal Your Deal with Beyond RTO!"/></td>
</tr>
</table>

</div>
<!-- FOOTER -->


<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><a href="http://beyondrto.com/" target="_blank"><img src="images/2959_BYRTO_July_emailer_10.png" width="100%" border="0" style="display:block;" alt="Beyond RTO Home Furnishings &amp; Appliances For Less."/></a></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" height="21" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:13px;color:#939497;"><a href="#" style="color:#82c13a;font-size:13px;text-decoration:none;" target="_blank"><strong>Shop Online</strong></a> &nbsp;|&nbsp; <a href="#" style="color:#82c13a;font-size:13px;text-decoration:none;" target="_blank"><strong>Find A Store</strong></a> &nbsp;|&nbsp; <a href="#" style="color:#82c13a;font-size:13px;text-decoration:none;" target="_blank"><strong>Forward To A Friend</strong></a></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_13.png" width="40" height="44" border="0" style="display:block;"/></td>
<td><img src="images/2959_BYRTO_July_emailer_14.png" width="36" height="44" border="0" style="display:block;"/></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" height="50" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:10px;color:#bebebe;line-height:14px;">
&copy; Copyright 2013 Baber's. All Rights Reserved.<br/>
You are currently subscribed as [email]. Click here to <unsubscribe style="color:#82c13a;text-decoration:underline;">unsubscribe</unsubscribe>.</td>
</tr>
</table>
</div>
</td></tr>
</table>

</td></tr>
</table>


</body>
</html>

Answer 1

我终于弄明白了。一旦我发现这也发生在Safari中，它就更容易陷入困境。我发现有些表没有定义宽度，Safari需要宽度值，显然移动电子邮件客户端也是如此。我通常在所有桌子上都有宽度，所以没想到这次是罪魁祸首。

移动电子邮件图像不会在移动设备上下载 - 多个平台

1 个答案: