为何旧版邮件客户端首次加载HTML邮件时主图无法正常显示？

这个是旧版邮件客户端特有的渲染bug，核心触发点有两个：

• Outlook 2016及更早版本使用Word作为HTML渲染引擎，Mac Mail旧版本的异步图片加载逻辑存在缺陷，当图片父容器的尺寸在首次渲染时未被明确指定时，会直接跳过图片的渲染流程，等切换邮件回到当前页时，容器尺寸已经被计算完成，图片就可以正常加载渲染
• 你的代码中img标签同时设置了height="380"属性和style="height:100%"，旧客户端解析样式优先级时出现混乱，无法在首次渲染时确定图片的实际尺寸，进一步触发了渲染跳过的问题

按以下步骤修改代码即可解决：

1. 移除img标签内的height:100%样式，替换为和属性一致的固定高度380px，同时补充border: none等样式避免旧客户端给图片添加默认边框
2. 给img父级的a标签添加固定宽高和display:block属性，确保图片加载前父容器就有明确的尺寸
3. 给img添加loading="eager"属性，强制客户端立即加载图片，避免懒加载逻辑导致的异常
4. 给外层td添加固定宽高和零内边距，进一步消除尺寸计算误差

修改后的完整代码如下：

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

如果修改后仍有偶发不显示的情况，可以在td内加一个全局的透明占位图，放在{{#if}}判断逻辑之外，确保td在任何情况下都有明确的渲染高度，占位图可直接使用base64编码的透明gif，不需要额外请求外部资源。

内容的提问来源于stack exchange，提问作者UXCODA