Vercel部署Next.js站点Resend邮件图片无法加载问题排查

核心问题分析 #

你遇到的图片加载失败，主要和Next.js静态资源目录规则、Vercel部署路径大小写、邮件客户端外部资源拦截这几个点有关，以下是具体解决步骤：

1. 修正静态资源目录与URL路径 #

Next.js仅识别全小写的public目录作为静态资源根目录，你本地的Public（大写P）目录不会被Next.js识别，部署到Vercel后资源根本不存在：

• 把本地目录名改成public，子目录调整为images/logo/main-logo.png
• 邮件里的图片URL对应改成：https://cardcounter21.com/images/logo/main-logo.png（注意全部小写，Vercel部署后路径区分大小写）

2. 验证静态资源可访问 #

直接在浏览器打开图片URL，确认能正常显示：

• 如果打不开，检查Vercel部署日志，确认public目录下的资源是否被正确上传
• 确保没有在next.config.js里配置限制静态资源访问的规则

3. 用Resend嵌入图片（彻底解决客户端拦截问题） #

大部分邮件客户端默认拦截外部链接图片，推荐把图片作为邮件附件嵌入，通过CID（内容ID）引用：

步骤1：发送邮件时添加嵌入附件

import fs from 'fs';
import path from 'path';
import { Resend } from 'resend';
import { Welcome } from './your-email-component-path';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendWelcomeEmail(toEmail) {
  // 读取本地图片文件
  const logoBuffer = fs.readFileSync(
    path.join(process.cwd(), 'public', 'images', 'logo', 'main-logo.png')
  );

  await resend.emails.send({
    from: 'CardCounter <no-reply@cardcounter21.com>',
    to: toEmail,
    subject: 'Welcome to CardCounter',
    react: <Welcome />,
    attachments: [
      {
        filename: 'main-logo.png',
        content: logoBuffer,
        cid: 'cardcounter-logo' // 定义唯一CID
      }
    ]
  });
}

步骤2：在邮件组件里引用CID

// 修正后的Welcome组件里的Img标签
<Img
  src="cid:cardcounter-logo" // 用CID引用嵌入的图片
  width="170"
  height="50"
  alt="CardCounter Logo"
  style={logo}
/>

4. 排除客户端拦截干扰 #

如果用外部URL的方式，需要提醒用户在邮件客户端里手动允许显示图片，但嵌入图片的方式可以避免这个操作，是更可靠的方案。

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