使用Next.js和API路由中的renderToString实现带图片邮件发送

核心问题 #

你用的Next.js <Image> 组件是为Web浏览器优化设计的，它会生成带特殊属性（比如data-src）的DOM结构，还依赖Next.js的图片优化服务。而renderToString渲染后，这些结构在邮件客户端里无法被正确解析，导致图片不显示。另外你代码里还有个小错误：把样式对象当成类名传给了className，这也会导致样式不生效。

解决步骤 #

1. 替换Next.js <Image>为原生<img>标签 #

邮件客户端对原生<img>支持最好，直接用它替代Next Image：

// 移除import Image from 'next/image'
// 替换成原生img标签
<img 
  src='https://source.unsplash.com/zTNv5fteUWI' 
  width={200} 
  height={120} 
  alt='邮件配图' 
  style={{display: 'block', margin: '0 auto'}} // 可选，加一些内联样式适配邮件
/>

2. 修复样式绑定错误 #

你把样式对象mailMainWrapper传给了className，应该改成style属性：

// 错误写法
<main className={mailMainWrapper}>
// 正确写法
<main style={mailMainWrapper}>

3. 邮件样式最佳实践 #

邮件客户端对CSS支持有限，尽量全部用内联样式，避免用类名或外部样式表。比如把所有样式都写在元素的style属性里。

修改后的完整Quotes组件 #

import React from 'react'

const Quotes = props => {
  const mailMainWrapper = {
    backgroundColor: 'green',
    padding: '20px', // 加个内边距让内容不挤
  }

  const styling = {color: 'blue', fontWeight: 'bolder'}

  return (
    <main style={mailMainWrapper}>
      <img 
        src='https://source.unsplash.com/zTNv5fteUWI' 
        width={200} 
        height={120} 
        alt='邮件配图' 
        style={{display: 'block', marginBottom: '15px'}}
      />
      <div style={mailMainWrapper}>
        <p style={styling}>Client email:    { props.clientEmail } </p>
        <p>Full name:       { props.firstName + ' ' + props.lastName} </p>
        <p>Contact number:  { props.phone } </p>
        <p>Message:         { props.message } </p>
      </div>
    </main>
  )
}

export default Quotes

额外检查 #

• 确保图片URL是公开可访问的，没有防盗链限制（比如Unsplash的这个链接是没问题的，但如果是你自己的图片，要确认邮件客户端能访问到）
• sendEmailHTML函数要正确把生成的HTML作为邮件正文发送，并且设置正确的Content-Type: text/html头

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