如何在邮件中设置替代回退图片而非替代文本？

需求 #

优先显示主图片，当主图片无法访问时自动切换为替代图片，且由于邮件客户端限制，不能使用onerror属性。

现有方案的问题 #

此前尝试用表格单元格背景图+img标签的组合方式，当主图加载失败时，会显示损坏图片图标，替代图虽能显示但被损坏图标影响观感，效果不佳。

改进方案 #

通过表格单元格背景图作为兜底替代，搭配img标签加载主图，并利用CSS隐藏加载失败时的损坏图标及alt文本，实现无缝替换：

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="100" style="
      background: url('替代图地址') no-repeat center;
      background-size: cover;
      text-align: center;
      font-size: 0;
      line-height: 0;">
      <img src="主图地址" 
           width="200" 
           height="100" 
           alt="" 
           style="display: block; font-size: 0; line-height: 0; color: transparent;">
    </td>
  </tr>
</table>

原理说明 #

• 表格单元格将替代图设为背景图，作为主图加载失败时的兜底内容
• img标签加载主图，尺寸与单元格完全匹配，加载成功时会覆盖背景图
• 通过font-size:0; line-height:0; color:transparent及空alt属性，避免主图加载失败时显示损坏图标和alt文本
• 全部使用内联CSS，确保在各类邮件客户端中生效

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