如何正确将CID添加至邮件正文？Quill+GraphMailer集成问题

问题根源 #

你遇到的ERR_UNKNOWN_URL_SCHEME错误是浏览器无法识别cid:协议导致的，但这属于正常现象——cid仅在邮件客户端中生效，浏览器预览时的报错不影响邮件发送后的显示。而正文为空大概率是正则替换逻辑存在漏洞，或是GraphMailer的附件配置未正确匹配CID。

分步解决方案 #

1. 正确提取并替换Quill中的Base64图片 #

从Quill生成的HTML中抽取出所有Base64图片，生成唯一CID，同时替换img标签的src为cid引用，保留原标签的其他属性（如alt、样式）：

function processQuillContent(html) {
  const embeddedImages = [];
  // 精准匹配带Base64地址的img标签，兼容大小写和额外属性
  const cleanedHtml = html.replace(/<img\s+src="data:image\/(png|jpeg|jpg|gif);base64,([^"]+)"([^>]*)>/gi, (match, imgFormat, base64Str, restAttrs) => {
    // 生成无冲突的唯一CID
    const cid = `embed-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
    // 存储图片信息，传给后端处理
    embeddedImages.push({
      cid,
      format: imgFormat,
      base64Data: base64Str
    });
    // 返回替换后的img标签，保留原属性
    return `<img src="cid:${cid}" ${restAttrs}>`;
  });
  return { cleanedHtml, embeddedImages };
}

2. 后端配置GraphMailer发送内嵌附件 #

核心是将附件的disposition设为inline，并确保cid与HTML中的引用完全一致：

// Node.js环境下的GraphMailer示例配置
async function sendEmbeddedImageEmail(to, subject, htmlContent, images) {
  const mailer = new GraphMailer({
    clientId: '你的ClientID',
    tenantId: '你的TenantID',
    clientSecret: '你的ClientSecret',
    // 其他必要配置项
  });

  const mailOptions = {
    to: to,
    subject: subject,
    html: htmlContent,
    attachments: images.map(img => ({
      filename: `${img.cid}.${img.format}`,
      content: Buffer.from(img.base64Data, 'base64'),
      cid: img.cid, // 必须与HTML中的cid完全匹配
      disposition: 'inline', // 标记为内嵌附件，而非普通附件
      contentType: `image/${img.format}`
    }))
  };

  try {
    await mailer.send(mailOptions);
  } catch (err) {
    console.error('邮件发送失败:', err);
    throw err;
  }
}

3. 验证与调试 #

• 浏览器预览时的cid报错可忽略，直接测试邮件发送效果
• 检查替换后的HTML：确保src="cid:xxx"格式无误，无引号遗漏或格式错误
• 确认GraphMailer发送的邮件为multipart/related类型（多数库会自动处理，若异常需手动设置内容类型）

兼容性注意事项 #

• Outlook对CID大小写敏感，需保证前后端CID格式统一（全小写或全大写）
• Gmail可能自动将内嵌图片转为云端链接，但不影响正常显示
• 生成CID时仅使用字母、数字和连字符，避免特殊字符导致兼容问题

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