Next.js 14生产环境服务器图片无法显示问题求助

以下是针对性的排查和解决步骤：

1. 修正Next.js静态导出的图片优化配置 #

静态导出模式下，Next.js的Image组件默认图片优化功能无法生效，必须显式关闭优化才能正确加载原始图片。修改你的next.config.js：

const nextConfig = {
  output: 'export', // 静态导出配置
  images: {
    unoptimized: true, // 关键：关闭图片优化，适配静态导出
  },
};

module.exports = nextConfig;

修改后重新执行yarn run build，再上传新生成的out文件夹内容。

2. 检查构建后文件的上传路径 #

执行build后，public文件夹里的图片会被直接复制到out目录的根路径下。上传到cPanel时，要确保out里的所有文件（包括图片）直接上传到网站的根目录（通常是public_html），不要把整个out文件夹嵌套进去。比如图片实际访问路径应为https://你的域名/imageList1.jpg，而非https://你的域名/out/imageList1.jpg。

3. 核对文件名大小写 #

cPanel所在的Linux服务器区分文件名大小写，JSON里写的/imageList1.jpg必须和public文件夹里的图片文件名完全一致（包括大小写），不能出现imagelist1.jpg或ImageList1.jpg这类差异，否则会返回404导致图片损坏。

4. 检查文件权限 #

登录cPanel的文件管理器，找到图片文件右键查看权限：

• 图片文件权限设置为644（所有者读写，组和其他只读）
• 文件夹权限设置为755
  权限不正确会导致服务器拒绝访问图片，显示损坏状态。

5. 适配子目录部署路径（如果适用） #

如果你的网站部署在cPanel的子目录下（比如public_html/your-subdir），需要修改JSON里的图片路径，把根路径/imageList1.jpg改成对应子目录的路径，比如/your-subdir/imageList1.jpg，或者使用相对路径imageList1.jpg（确保组件所在页面和图片的访问层级匹配）。

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