邮件中HTML嵌入的App Store图标显示异常（仅展示alt文本）求助

问题说明 #

通过Apple Media Services工具生成的App Store下载徽章HTML代码，在浏览器中显示正常，但嵌入邮件后仅展示alt文本，徽章图片无法加载。原代码如下：

<a href="https://apps.apple.com/us/app/symphony-secure-communications/id1098963705?itsct=apps_box_badge&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;amp;releaseDate=1465171200&amp;h=79f9b0d11830b0975c496e1c6812d49c" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;"></a>

解决方案 #

1. 替换为Apple官方静态徽章图片 #

Apple提供了直接的静态徽章图片URL，无需通过动态API加载，邮件客户端兼容性更强。替换<img>的src为以下链接（按需选择黑/白版本）：

• 黑色徽章：https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2016-06-06&kind=iossoftware&bubble=ios_apps
• 白色徽章：https://linkmaker.itunes.apple.com/en-us/badge-lrg-wht.svg?releaseDate=2016-06-06&kind=iossoftware&bubble=ios_apps

修改后的示例代码：

<a href="https://apps.apple.com/us/app/symphony-secure-communications/id1098963705?itsct=apps_box_badge&itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;">
  <img src="https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2016-06-06&kind=iossoftware&bubble=ios_apps" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px; border: 0;">
</a>

2. 下载图片并自行托管 #

动态API的图片URL可能被邮件客户端的安全策略拦截（比如防盗链、HTTPS证书验证问题）。直接下载徽章图片，上传到自己的HTTPS服务器，再替换src为自有托管地址。

步骤：

• 打开原图片URL，右键保存图片到本地
• 上传到你的网站或邮件服务支持的图片托管平台
• 将<img>的src替换为新的图片URL

3. 优化邮件HTML兼容性 #

邮件客户端对CSS和HTML的支持差异较大，调整代码增强兼容性：

• 给<img>添加border="0"属性，避免部分客户端显示边框
• 移除可能被过滤的复杂内联样式，改用基础样式
• 确保所有URL使用HTTPS协议（部分邮件客户端会阻止HTTP资源）

调整后的兼容版代码示例：

<a href="https://apps.apple.com/us/app/symphony-secure-communications/id1098963705" target="_blank" style="display: inline-block; border-radius: 13px; overflow: hidden; width: 250px; height: 83px;">
  <img src="你的托管图片URL" alt="Download on the App Store" width="250" height="83" style="border-radius: 13px; border: 0; display: block;" border="0">
</a>

4. 多客户端测试验证 #

不同邮件客户端（Outlook、Gmail、Apple Mail等）对资源加载的规则不同，建议使用邮件测试工具验证显示效果，针对特定客户端做针对性调整。

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