Next.js部署Vercel生产环境图片404问题排查求助

结合你的场景，以下是可能导致生产环境图片404的原因：

• 文件名/路径大小写不匹配
  Vercel部署环境基于Linux系统，严格区分大小写；而本地开发环境如果是Windows或默认不区分大小写的macOS，即使文件名大小写不一致也能正常访问。比如你代码里写的是/images/logo.jpg，但实际文件可能是Logo.jpg或LOGO.jpg，部署后就会出现资源找不到的情况。

• 图片文件未提交到Git仓库
  检查你的.gitignore文件，确认是否误将public/images目录或具体图片文件排除在外；另外也可能是本地新增/修改图片后，没有执行git add和git commit就推送代码到Vercel，导致部署时服务器上不存在该图片文件。

• Vercel构建缓存未清除
  有时候Vercel的构建缓存会导致新添加的图片没有被正确部署。可以尝试重新触发部署，在部署设置中勾选“清除构建缓存”选项，强制重新构建并上传所有资源。

• Next.js配置异常
  检查你的next.config.js文件：

  • 如果配置了basePath，图片的src路径需要包含对应的basePath前缀（你的场景中未体现basePath，这条可能性较低）；
  • 若使用较旧版本的Next.js（如Next.js 12及之前），确认是否正确配置了images.unoptimized或images.domains（public目录下的图片理论上无需配置domains，但部分旧版本可能存在兼容问题）。

• 实际存储路径与代码引用不匹配
  再次核对本地项目的文件夹结构，确保图片确实存放在public/images/目录下，而非子目录（比如public/images/sub/logo.jpg）或其他位置，代码中的路径必须和实际存储路径完全对应。

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