Next.js部署Vercel时本地图片模块找不到问题求助

可能的原因1：文件名大小写不匹配 #

本地系统（如Windows）默认不区分文件名大小写，但Vercel部署环境基于Linux，严格区分大小写。如果代码中引用的路径（如1.jpg）和仓库中实际文件名（如1.JPG）大小写不一致，就会出现找不到模块的错误。

解决方法 #

• 检查仓库中图片文件的实际大小写，确保和代码中的引用完全一致；
• 统一文件名的大小写规范，避免跨环境差异。

可能的原因2：静态资源未放在Next.js约定的public目录 #

Next.js默认将public目录作为静态资源根目录，生产构建时会自动处理该目录下的资源。如果图片放在自定义的resources目录，且未通过webpack正确导入，Vercel构建时可能不会将这些资源纳入产物，导致路径解析失败。

解决方法 #

方案A：迁移资源到public目录

1. 将resources/images目录整体移动到项目根目录的public文件夹下，形成public/images/projects/scanrecs/1.jpg的结构；
2. 代码中修改引用路径为绝对路径：

   <img src="/images/projects/scanrecs/1.jpg" alt="scanrecs" />
   

方案B：通过import导入静态资源

如果不想移动目录，可通过ES模块导入的方式引用图片，让webpack自动处理打包：

// 在组件文件顶部导入图片
import scanrecsImage from '../resources/images/projects/scanrecs/1.jpg'

// 在组件中使用
<img src={scanrecsImage} alt="scanrecs" />

可能的原因3：资源目录被.gitignore排除 #

如果.gitignore文件中包含了resources/images或相关路径，导致图片文件未被提交到GitHub，Vercel部署时自然找不到对应资源。

解决方法 #

• 打开项目根目录的.gitignore文件，检查是否存在排除图片目录的规则；
• 删除或注释掉对应的规则，将图片文件提交并推送到GitHub。

可能的原因4：相对路径解析上下文差异 #

本地开发时，组件的相对路径解析基于当前文件的位置，但生产构建后，Next.js可能会调整页面的输出结构，导致原有相对路径失效。

解决方法 #

• 优先使用上述的public目录绝对路径或import导入方式，避免依赖相对路径的上下文解析。

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