如何使用Nodemailer发邮件时在Outlook中正常嵌入图片及背景图

首先明确核心结论：data-imagetype="External"是HTML标签的专属属性，仅对<img>标签生效，无法添加到CSS的background: url()语法中，因此你不能直接通过该属性让CSS背景图被Outlook识别。

你之前写的分层代码不生效的核心原因是：Outlook、Windows 10邮件客户端使用Word作为HTML渲染引擎，对position、flex、z-index、background-size这类现代CSS属性支持度极差，绝大多数属性都会被直接忽略。

可用的解决方案 #

方案1：使用VML语法实现背景图（Outlook全版本兼容）

VML是微软推出的矢量标记语言，专门适配Office系软件的渲染逻辑，是目前Outlook下实现背景图最稳定的方案，你可以直接替换到你的邮件模板中：

<!DOCTYPE html>
<html>
<body>
  <!--[if mso]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://imgur.com/JzrkOXb.png" color="#2AEDC2"/>
  </v:background>
  <![endif]-->
  <main style="padding-left:40px;padding-right:40px;border:0.5px solid #e5e5e5;margin-top:20px;border-radius:2px;background-image:url('https://imgur.com/JzrkOXb.png');background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;">
    <p style="font-size:20px;text-align:center;color:black"><strong>Hello People</strong></p><br />
    <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br />
    <p style="text-align:center;">!REGARDS!</p><br /><br /><br />
  </main>
</body>
</html>

上述代码中<!--[if mso]>包裹的部分仅会被Outlook识别，其他邮件客户端会自动忽略，不会影响其他端的显示效果。

方案2：使用兼容邮件客户端的表格分层方案（复用你已验证的<img>标签方案）

如果不想用VML，你可以改用邮件客户端通用兼容的表格布局，替代不支持的position、flex布局，把带data-imagetype的图片放在底层当背景，内容放在上层：

<!DOCTYPE html>
<html>
<body>
  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:20px;">
    <tr>
      <td align="center" background="https://imgur.com/JzrkOXb.png" style="background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;border:0.5px solid #e5e5e5;border-radius:2px;padding:40px 0;">
        <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
          <v:fill type="tile" src="https://imgur.com/JzrkOXb.png" color="#2AEDC2" />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
        <div>
          <!-- 你可以直接在这里用已经验证过的img标签也可以 -->
          <!-- <img data-imagetype="External" src="https://imgur.com/JzrkOXb.png" width="100%" style="display:block;" /> -->
          <p style="font-size:20px;text-align:center;color:black;margin:0 40px;"><strong>Hello People</strong></p><br />
          <p style="text-align:center;margin:0 40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br />
          <p style="text-align:center;margin:0 40px;">!REGARDS!</p><br /><br /><br />
        </div>
        <!--[if mso]>
          </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

额外优化建议 #

如果你不想使用外链图片，也可以通过Nodemailer的内嵌附件配置实现：

• 在发送配置的attachments数组中添加图片，设置contentDisposition: 'inline'，同时指定唯一的cid值，比如cid:bgImg
• 把模板中所有图片的src链接替换为cid:bgImg即可，这种配置下图片不会在收件端显示为独立附件

内容的提问来源于stack exchange，提问作者Jorge Rojas C.