html邮件中无法使用javascript（如onerror事件）实现图片降级，因为所有主流邮件客户端均禁用脚本；但可通过纯html/css方案结合客户端特性，安全、可靠地为outlook、gmail等提供适配的图片资源。
html邮件中无法使用javascript（如onerror事件）实现图片降级，因为所有主流邮件客户端均禁用脚本；但可通过纯html/css方案结合客户端特性，安全、可靠地为outlook、gmail等提供适配的图片资源。
在构建跨客户端兼容的HTML邮件时，“定义邮件管理器”并非指编写后端服务，而是指通过HTML结构与客户端行为差异，智能适配不同邮件客户端（如Outlook、Gmail、Apple Mail）对图片加载的支持策略。关键前提必须明确：所有现代邮件客户端（包括Outlook Desktop、Outlook Web、Gmail、iOS Mail）均不执行JavaScript，因此 <img onerror="...">、<script>、内联事件处理器等完全无效，且可能被直接剥离或导致渲染异常。
✅ 正确思路是：利用客户端特有的HTML/CSS支持差异，通过条件注释、CSS媒体查询、属性选择器或嵌套结构实现“无JS图片适配”。以下是经过实测验证的推荐方案：
1. 优先使用外部HTTPS图片（推荐通用方案）
绝大多数客户端（Gmail、Apple Mail、Outlook Web）完美支持标准 <img src="https://cdn.example.com/logo.png">。确保图片托管于HTTPS服务器，并设置合理CORS头（非必需，但建议）。
<img src="https://example.com/images/logo-gmail.png"
alt="Company Logo"
width="200" height="50"
style="display:block; border:0; outline:none;">2. Outlook专属适配：使用Base64 + 条件注释（仅限Outlook Desktop旧版）
Outlook 2013–2019（基于MS Word渲染引擎）不支持Base64图片，但支持VML；而新版Outlook for Microsoft 365（基于WebView2）已支持Base64。若需兼容旧版Outlook，可采用以下双图结构：
立即学习“前端免费学习笔记（深入）”；
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px;height:50px;">
<v:fill type="tile" src="https://example.com/images/logo-outlook.jpg" color="#ffffff" />
</v:rect>
<![endif]-->
<!--[if !mso]><!-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
alt="Logo" width="200" height="50"
style="display:block;">
<!--<![endif]-->⚠️ 注意：Base64图片体积增大~33%，且Outlook旧版完全忽略src中的data URL，因此必须配合[if mso]条件注释提供VML或外部图替代。
3. Gmail & Apple Mail：依赖标准HTML + 备用alt文本
Gmail（Web/iOS/Android）和Apple Mail全面支持外部图片与alt属性。务必设置语义化alt，并在样式中确保图片失败时文字可读：
<div style="font-family:Arial, sans-serif; font-size:14px; color:#333;">
<img src="https://example.com/images/banner.jpg"
alt="Summer Sale: Up to 50% off — shop now"
width="600" height="200"
style="display:block; max-width:100%; height:auto;">
</div>总结与最佳实践
- ❌ 禁止使用任何JavaScript（onerror、onclick、<script>），所有邮件客户端默认移除；
- ✅ 优先使用CDN托管的HTTPS外部图片（最稳定、最轻量、最兼容）；
- ✅ 如需Base64（例如离线场景或极小图标），仅用于支持它的客户端（Gmail、Apple Mail、新版Outlook），并始终提供alt文本；
- ✅ 对Outlook旧版，用[if mso]包裹VML或备用图片，避免依赖JS降级；
- ✅ 所有<img>必须声明width/height（防重排）和style="display:block"（去下边距）；
- ✅ 发送前务必使用工具（如Litmus、Email on Acid）进行多客户端截图测试。
真正的“邮件管理器”逻辑应置于发送服务端（如NodeMailer、SendGrid模板引擎），通过用户代理识别或客户端能力库（如CanIEmail）动态生成对应HTML——而非在邮件中运行代码。
