Next.js中使用react-email渲染公司Logo失败问题求助

问题根源 #

邮件客户端无法识别Next.js的public目录相对路径，也无法读取本地文件路径——邮件是独立的HTML内容，必须使用可公开访问的绝对URL或Base64编码嵌入图片才能正常显示。

可行方案 #

方案1：使用Base64嵌入图片（最可靠，无需依赖外部服务器） #

将图片转为Base64编码直接嵌入邮件，避免依赖外部资源。在Next.js中可通过服务器端代码读取图片并转换：

import { Img } from "@react-email/components";
import fs from "fs";
import path from "path";

// 仅在服务器端执行（Next.js组件需标记为服务器组件）
const logoPath = path.join(process.cwd(), "public", "images", "ai-capital.png");
const logoBase64 = fs.readFileSync(logoPath, { encoding: "base64" });
const logoSrc = `data:image/png;base64,${logoBase64}`;

// 在组件中使用
<Img
  src={logoSrc}
  width="150"
  height="100"
  alt="AI Capital Logo"
/>

注意：如果你的组件是客户端组件（带'use client'指令），不能直接使用fs，可将图片转换逻辑移到API路由或服务器端函数中，再传递给客户端组件。

方案2：使用绝对公共URL（适合已部署项目） #

如果项目已部署到线上，直接使用图片的完整访问URL：

<Img
  src="https://your-domain.com/images/ai-capital.png"
  width="150"
  height="100"
  alt="AI Capital Logo"
/>

开发环境下可使用http://localhost:3000/images/ai-capital.png，但仅在本地测试邮件客户端能访问到本地服务器时有效。

方案3：通过环境变量动态配置URL #

在项目根目录的.env文件中添加：

NEXT_PUBLIC_BASE_URL=https://your-domain.com

然后在组件中使用：

<Img
  src={`${process.env.NEXT_PUBLIC_BASE_URL}/images/ai-capital.png`}
  width="150"
  height="100"
  alt="AI Capital Logo"
/>

这样开发和生产环境可自动切换URL。

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