Amazon SES发送HTML邮件CSS失效、图片不显示问题咨询

1. 最高优先级修复：正文内容赋值颠倒 #

你在index.js的SES发送参数中，完全写反了HTML正文和纯文本正文的数据源，这是导致异常的核心原因：

// 错误写法
Html: {
  Charset: 'UTF-8',
  Data: messages.txt, // 这里传入的是纯文本短句，根本不是你的HTML模板
},
Text: {
  Charset: 'UTF-8',
  Data: messages.html, // 这里传入的是HTML源码，不是纯文本内容
},

该错误会直接导致邮件客户端渲染HTML部分时拿不到模板代码，纯文本部分反而显示HTML源码，必然出现布局完全错乱的问题。
修复方法：将两个字段的取值对调即可。

2. 模板拼接逻辑错误 #

你在messages.js中拼接HTML数组时，错误使用<br />作为连接符：

// 错误写法
].join('<br />'),

这会在每两行HTML标签之间插入一个多余的<br />标签，这些额外生成的换行块会直接破坏inline-block布局依赖的无空白结构，导致两列错位成单列，同时多余标签还可能造成部分客户端截断HTML结构，触发内容拦截。
修复方法：将连接符改为空字符串''，HTML语法本身会忽略代码中的普通换行，不需要额外插入<br />。

3. 邮件布局兼容性优化 #

邮件客户端对CSS的支持度远低于现代浏览器，display: inline-block在Outlook、旧版Gmail等客户端中会被直接过滤，无法实现预期布局：

• 废弃inline-block实现两列的方案，改用邮件生态兼容最好的原生table布局：外层套固定600px宽度的父table，内部放两个并排的300px宽度<td>标签，分别承载左侧图片、右侧文案内容，不需要额外加display样式。
• 颜色值不要用rgba()写法，改用十六进制色值，比如将rgba(0, 128, 96, 1)替换为#008060，避免部分客户端不识别rgba导致背景色失效。

4. 图片不显示排查 #

修复上述问题后如果图片仍无法加载，按以下顺序排查：

• 确认发信域名、发件邮箱已在SES控制台完成DKIM、SPF、DMARC身份验证，未通过验证的发件人发出的邮件，会被所有主流邮箱默认拦截外部图片，需要收件人手动确认才会加载。
• 确认图片存储的源站没有配置防盗链规则，不会拦截邮件客户端的请求，图片链接可以在无登录、无cookie的无痕浏览器中直接访问打开。
• 图片链接使用标准HTTPS 443端口，不要带特殊参数、非标准端口，避免被邮箱判定为恶意链接拦截。

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