Outlook邮件预览显示图片src而非alt文本问题求助

我之前帮不少开发者搞定过这个Outlook预览的小坑，刚好能给你几个实用的解决思路，亲测有效：

核心原因先搞懂 #

Outlook的桌面版（尤其是Windows端）邮件预览机制有点“死板”——它会优先抓取邮件HTML最开头的可见/可解析文本内容。如果你的邮件首屏直接是图片，它可能跳过alt文本，误把图片的src（尤其是CDN那种长URL）当成预览内容抓出来。和CDN本身关系不大，主要是Outlook预览引擎的抓取逻辑问题。

具体解决方案 #

1. 在图片前插入隐藏的占位文本 #

这是最靠谱的方法，用MJML的<mj-text>加一段完全隐藏的文本，放在图片标签的前面。Outlook预览会识别这段文本，同时实际邮件里完全看不到它：

<mj-text style="position:absolute; visibility:hidden; font-size:1px; color:transparent; line-height:1px;">
  这里放和邮件主题匹配的预览文本，比如「2024夏季新品上线，点击查看详情」
</mj-text>
<mj-image src="你的CDN图片URL" alt="夏季新品宣传图" width="600" />

注意：这段文本必须在图片之前，样式要确保绝对隐藏，同时不要有空行或者多余字符。

2. 强制优化图片的alt属性 #

别小看alt文本，虽然Outlook预览有时候会忽略，但如果你的alt文本足够明确，且图片标签没有语法问题，部分版本的Outlook会优先抓取alt。确保MJML的<mj-image>标签里明确设置alt，且不要留空：

<mj-image 
  src="https://your-cdn.com/image.jpg" 
  alt="2024夏季新品限时折扣，点击了解" 
  width="600" 
  align="center"
/>

3. 添加自定义邮件头X-Preview #

如果你的邮件发送服务支持添加自定义邮件头，可以给邮件加上X-Preview字段，Outlook的部分版本会优先读取这个头的内容作为预览：

X-Preview: 2024夏季新品上线，限时7折优惠

比如用SendGrid、Mailgun这类服务，都可以在发送配置里添加这个自定义头。

4. 调整邮件结构：把文本放在图片前面 #

如果邮件设计允许，尽量把邮件的核心标题文本放在最顶部，再放图片。比如先放一个<mj-text>的主标题，再展示图片，这样Outlook预览会直接抓取标题文本，完全不会碰图片URL：

<mj-text style="font-size:24px; font-weight:bold;">2024夏季新品限时7折！</mj-text>
<mj-image src="你的CDN图片URL" alt="夏季新品宣传图" width="600" />

额外注意事项 #

• 多测试不同版本的Outlook：比如Outlook 2016、365桌面版、网页版，它们的预览逻辑略有差异，确保你的方案覆盖主流版本；
• 避免CDN URL有过多特殊字符：虽然不是根本原因，但简洁的URL能降低被误抓的概率，尽量用精简的CDN链接。

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