如何在Sails 0.12.14的sails-hook-email中嵌入邮件图片

你遇到的问题很典型——邮件客户端无法识别模板里的相对路径/images/img1.png，因为邮件是脱离你的Sails服务器环境打开的，客户端不知道这个路径指向哪里。下面给你三种可行的解决方案，按推荐程度排序：

方案一：使用Content-ID（CID）嵌入附件（推荐） #

这是邮件系统的标准做法，把图片作为附件添加，但通过CID标记让它在HTML内容中显示，不会被当作普通附件。

步骤1：修改邮件发送代码 #

在你调用sails.hooks.email.send的地方，添加attachments配置，指定图片路径和对应的CID：

var path = require('path');

// 发送重置密码邮件
sails.hooks.email.send(
  'forgotPassword', // 模板名称
  {
    recipientName: 'John Doe',
    imgCid: 'logo@your-app.com' // 自定义CID，唯一即可
  },
  {
    to: 'user@example.com',
    subject: '重置你的密码',
    attachments: [
      {
        filename: 'img1.png',
        path: path.join(sails.config.appPath, 'assets/images/img1.png'),
        cid: 'logo@your-app.com' // 和模板里引用的CID保持一致
      }
    ]
  },
  function(err) {
    if (err) {
      sails.log.error('发送邮件失败:', err);
    } else {
      sails.log('邮件发送成功');
    }
  }
);

步骤2：修改HTML模板 #

把模板里的图片src改成cid:你的CID值：

<p>Dear <%=recipientName%>,</p> <br/> 
<img src="cid:<%=imgCid%>" width="300" alt="App Logo">

这种方式兼容性最好，几乎所有邮件客户端都支持，而且不会让邮件体积过度膨胀。

方案二：使用绝对URL（适合公网可访问的图片） #

如果你的Sails服务器已经部署到公网，或者本地开发时用了ngrok之类的工具暴露端口，可以直接用图片的绝对URL：

修改模板里的图片路径：

<p>Dear <%=recipientName%>,</p> <br/> 
<img src="https://your-domain.com/images/img1.png" width="300" alt="App Logo">

注意：Sails默认会把assets/images下的文件发布到根目录的/images路径，所以这个URL是有效的。本地开发时如果用ngrok，把域名换成ngrok给你的临时域名即可。

这个方案的优点是实现简单，但依赖图片的公网可访问性，本地开发时可能需要额外工具支持。

方案三：将图片转为Base64嵌入（适合小图片） #

把图片编码成Base64字符串，直接嵌入到HTML的src属性里，不需要依赖外部资源：

步骤1：在发送邮件前编码图片 #

var fs = require('fs');
var path = require('path');

// 读取图片并转为Base64
var imgPath = path.join(sails.config.appPath, 'assets/images/img1.png');
var imgBase64 = fs.readFileSync(imgPath, { encoding: 'base64' });
var imgDataURI = `data:image/png;base64,${imgBase64}`;

// 发送邮件
sails.hooks.email.send(
  'forgotPassword',
  {
    recipientName: 'John Doe',
    imgSrc: imgDataURI
  },
  {
    to: 'user@example.com',
    subject: '重置你的密码'
  },
  function(err) {
    // 处理结果
  }
);

步骤2：修改模板引用Base64字符串 #

<p>Dear <%=recipientName%>,</p> <br/> 
<img src="<%=imgSrc%>" width="300" alt="App Logo">

这种方式不需要依赖外部资源，但Base64编码会让图片体积增加约30%，如果是大图片会导致邮件过大，可能被邮件服务商拦截，所以只适合小图标之类的图片。

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