Nodemailer本地图片嵌入HTML邮件无法显示问题求助

你的代码里有三个关键问题导致图片显示异常，直接按下面的步骤修正即可：

• 修正图片的Data URI格式：HTML中img的src必须加上data:image/png;base64,前缀，否则邮件客户端无法识别这是一张PNG图片的base64数据。
• 正确传递HTML模板：你现在把imgData传给了html字段，这完全错误，应该传递拼接好的htmlTemplate。
• 使用动态文件路径：硬编码绝对路径会在包发布后失效，要根据当前文件位置动态获取图片路径。

完整修正代码（TypeScript/ESM） #

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import nodemailer from 'nodemailer';

// 解决ES模块中__dirname缺失的问题
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 动态获取图片路径
const imgPath = path.join(__dirname, '_assets', 'image.png');
// 读取二进制图片并转base64编码
const imgData = fs.readFileSync(imgPath, { encoding: 'base64' });
// 拼接正确的HTML模板
const htmlTemplate = `
<html><body>
<img src="data:image/png;base64,${imgData}" />
</body></html>`;

// 发送邮件逻辑
async function sendEmail() {
  const transporter = nodemailer.createTransport({
    // 替换为你的SMTP配置
    host: 'smtp.example.com',
    port: 587,
    secure: false,
    auth: {
      user: 'your-email@example.com',
      pass: 'your-password'
    }
  });

  await transporter.sendMail({
    from: 'your-email@example.com',
    to: 'recipient@example.com',
    subject: '带本地图片的邮件',
    html: htmlTemplate
  });
}

sendEmail();

备选方案：用附件CID嵌入图片（适合大图片） #

如果图片体积较大，base64会让HTML过于臃肿，可以用Nodemailer的附件功能通过CID引用图片：

const htmlTemplate = `
<html><body>
<img src="cid:image1" />
</body></html>`;

await transporter.sendMail({
  from: 'your-email@example.com',
  to: 'recipient@example.com',
  subject: '带本地图片的邮件',
  html: htmlTemplate,
  attachments: [
    {
      filename: 'image.png',
      path: imgPath,
      cid: 'image1' // 与HTML中的cid属性对应
    }
  ]
});

关键注意事项 #

• 绝对不能用utf-8编码读取PNG图片，PNG是二进制文件，utf-8编码会破坏原始数据导致乱码，必须用base64编码读取。
• 动态路径生成是包开发的核心，硬编码路径会导致包在不同环境下无法找到图片文件。

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