Next.js项目部署Vercel后图片无法渲染问题求助

核心问题：路径大小写不匹配 #

你的public文件夹中创建的是Thumbnail（首字母大写）目录，但代码里引用的路径是/thumbnail/ProductCard.png（全小写）。Vercel的部署环境基于Linux，文件系统严格区分大小写，而本地开发环境（Windows/macOS）通常不区分，这就导致本地能找到图片，但部署后路径不匹配无法加载。

修复步骤 #

1. 修正路径大小写 #

将组件中的图片路径改为与实际文件夹一致的大小写：

<Image
  src={"/Thumbnail/ProductCard.png"}
  alt="Product Card"
  width={500}
  height={500}
/>

2. 推荐使用图片导入方式（更可靠） #

直接导入图片文件，这样本地开发阶段就能检测到路径错误，避免部署后才发现问题：

// 导入图片（注意路径大小写）
import ProductCard from '@/public/Thumbnail/ProductCard.png';

// 在组件中使用
<Image
  src={ProductCard}
  alt="Product Card"
  width={500}
  height={500}
/>

3. 额外检查项 #

• 确认public文件夹结构正确：图片需放在项目根目录的public文件夹下，而非src或其他目录，App Router下public文件夹是静态资源的默认存放位置。
• 无需在next.config.js中配置images.remotePatterns或domains（仅当使用外部域名图片时需要）。

修改后重新部署到Vercel，图片即可正常渲染。

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