Next.js 13部署至Vercel时本地图片模块找不到的解决求助

可能的原因及对应解决方案 #

• 文件未提交至GitHub
  检查GitHub仓库中是否存在public/icons/mail.svg文件：

  • 查看本地.gitignore文件，确认是否误将public/或public/icons/加入忽略规则
  • 执行以下命令提交缺失文件：

    git add public/icons/mail.svg
    git commit -m "Add mail.svg icon"
    git push
    

  重新触发Vercel部署即可。

• 文件名大小写不匹配
  本地Windows/macOS系统默认不区分文件名大小写，但Vercel使用的Linux环境严格区分：

  • 确认本地public/icons/下的文件名称为全小写的mail.svg，而非Mail.svg或MAIL.svg
  • 修改导入语句中的文件名，保持和实际文件完全一致。

• 改用绝对路径引用public资源
  Next.js的public目录是静态资源根目录，可直接使用绝对路径替代相对路径导入：

  • 删除原导入语句：

    import Mail from '../../../../public/icons/mail.svg';
    

  • 直接在Image组件中使用绝对路径（需指定width和height属性）：

    import Image from 'next/image';
    
    <Image src="/icons/mail.svg" alt="mail" width={24} height={24} />
    

• 清理Vercel构建缓存
  Vercel的构建缓存可能残留旧路径配置：

  • 登录Vercel控制台，进入对应项目的Deployments页面
  • 选择最新的失败部署，点击Redeploy并勾选Clear build cache选项后重新部署

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