Next.js项目部署Vercel/Render时图片找不到错误求助

常见排查与修复方案 #

1. 修正图片路径写法 #

Next.js对public目录下的静态资源，要求用根路径引用（比如/images/headshot.jpg），而非相对路径（../images/headshot.jpg）。部署环境的路由结构和本地不同，相对路径会导致资源解析失败。

• 错误示例：src="../public/images/avatar.png"
• 正确示例：src="/images/avatar.png"

2. 确认public目录规范 #

确保图片存放在项目根目录的public文件夹下，且目录名是全小写的public——部署服务器大多区分大小写，目录名不匹配会导致资源找不到。比如图片在public/assets下，引用路径应为/assets/xxx.png。

3. 检查next/image组件配置 #

如果用了Next.js官方的next/image组件，需适配部署平台调整配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true, // 若部署平台不支持图片优化（比如Render），开启此项跳过优化
    // 若使用外部图床，需配置允许的域名：
    // domains: ['your-image-host.com'],
  },
};

module.exports = nextConfig;

Vercel默认支持图片优化，但Render这类平台可能需要手动关闭优化才能正常加载本地图片。

4. 排查构建与仓库问题 #

• 查看Vercel/Render的构建日志，确认是否有图片资源拷贝失败的提示；
• 检查.gitignore文件，确保没有误排除图片所在目录；
• 验证GitHub仓库中是否存在对应的图片文件，避免本地有文件但未提交到仓库的情况。

针对你的项目，优先检查public目录结构和图片引用路径，再根据部署平台调整next.config.js的图片配置，应该能解决问题。

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