时间戳

首页 > 解决方案 > 为什么我的图像在首次加载时未显示在旧电子邮件客户端上？

email - 为什么我的图像在首次加载时未显示在旧电子邮件客户端上？

问题描述

我有一个在表格中设计的 HTML 电子邮件，以支持旧的电子邮件客户端。我正在使用sendgrid，因此图像值使用{{#each}}

这在大多数较新的客户端和浏览器上都可以正常工作，但在 2016 年之前的 Mac Mail 和 Outlook 上，主图像不会在您第一次查看电子邮件时显示。如果您在收件箱中查看另一封电子邮件并返回该邮件，它会神奇地出现。此外，一旦它被缓存，它就会每次都出现。

这就是我显示图像的方式。

<td class="img-container">
  <a href="linkToSomewhere.html" style="text-decoration: none;">
     {{#if this.hasPhoto}}
       <img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />                       
      {{/if}}
   </a>
</td>

标签： emailhtml-emailsendgrid

解决方案

我在这里添加这个是因为我找不到通过搜索解决这个问题的任何方法。我希望这可以帮助你。要解决这个奇怪的错误，您需要在 HTML 中为 img 保留空间。您可以在td

 <td class="img-container" style="width: 100%; height: 380px;">
  <a href="linkToSomewhere.html" style="text-decoration: none;">
     {{#if this.hasPhoto}}
       <img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />                       
      {{/if}}
   </a>
</td>

推荐阅读