如何在.ejs邮件模板文件中添加<img/>标签并正常显示图片

核心问题根因 #

• 当前渲染出的图片地址为http://localhost:3001/assets/fundo-img.png，localhost为本地开发环境地址，外部邮件客户端、谷歌图片代理服务均无法访问你的本地服务，因此图片加载失败。
• 静态资源路径不匹配：你将fundo-img.png存放在utils/emails/templates目录下，但express配置的静态资源根目录为public文件夹，只有存放在public/assets下的文件才能通过/assets/xxx的路径访问，即使服务可公网访问，当前路径也无法命中资源。

解决步骤 #

1. 调整图片存放位置
   将fundo-img.png从utils/emails/templates目录移动到public/assets目录，确保静态资源服务可以匹配到对应文件。
2. 替换本地服务地址为公网可访问地址
   开发环境测试时，可以用内网穿透工具将本地3001端口映射到公网，将模板中的apiHost变量替换为映射生成的公网地址；上线使用时，直接将apiHost替换为服务部署后的正式公网域名即可。
3. 可选高稳定性方案：内嵌图片到邮件
   如果不想依赖公网静态资源服务，可以在发送邮件时将图片作为关联附件添加，通过cid在模板内引用，示例如下：

nodemailer发送配置参考：

const mailOptions = {
  from: '你的发件人地址',
  to: '收件人地址',
  subject: '邮件标题',
  html: ejs.render(邮件模板内容, {模板变量}),
  attachments: [{
    filename: 'fundo-img.png',
    path: __dirname + '/utils/emails/templates/fundo-img.png',
    cid: 'fundoImg' // 自定义唯一标识
  }]
}

EJS模板引用方式：

<img alt="Match" src="cid:fundoImg">

该方案不受外部静态资源服务可用性影响，邮件图片显示成功率更高。

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