基于Express与Pug：如何在邮件中添加图片（作为正文而非附件）

• 使用CID内嵌图片（推荐方案）
  这是邮件内嵌图片的标准可靠方式，原理是把图片作为邮件的“内嵌附件”，通过Content-ID（CID）关联到正文：

  1. 在Pug模板里，img标签的src使用cid:自定义标识，比如：

     img(src='cid:email-logo', alt='品牌Logo')
     

  2. 发送邮件时（以Nodemailer为例），在附件配置里指定对应的CID：

     attachments: [
       {
         filename: 'logo.png',
         path: './static/images/logo.png', // 本地图片路径
         cid: 'email-logo' // 和Pug里的标识完全一致
       }
     ]
     

  这样邮件客户端会自动把附件里的图片渲染到正文对应位置，不会显示为独立附件。

• 修正图片路径问题

  • 绝对不要用本地相对路径（比如./img/logo.png），邮件客户端无法访问你的本地文件；
  • 如果用网络图片，必须用公开可访问的HTTPS链接，多数客户端会拦截HTTP协议的图片，同时确保链接长期有效、无访问权限限制；
  • Pug里的正确写法示例：

    img(src='https://your-website.com/static/images/logo.png', alt='品牌Logo')
    

• 排查客户端安全限制
  主流邮件客户端（Gmail、Outlook、苹果邮件等）默认会屏蔽外部图片，需要收件人手动点击“显示图片”才能加载，这是安全机制无法绕过。建议给img标签添加清晰的alt文本，让用户即使看不到图片也能了解内容：

  img(src='cid:email-logo', alt='XX品牌官方Logo，蓝色圆形图标')
  

• 检查Pug编译后的HTML
  把Pug模板编译成HTML后，确认img标签的src属性是否正确生成，比如变量渲染是否有误、路径有没有被转义。比如用变量传入路径时，要确保变量值是正确的CID或公开链接：

  - const imageSrc = 'cid:email-logo'
  img(src=imageSrc, alt='品牌Logo')
  

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