NextJS更换新图片后无法正常显示问题求助

可能的原因及修复步骤 #

1. 资源路径错误 #

Next.js的public目录是静态资源的根目录，引用时不需要带上/public前缀。你的图片放在/public/images下，正确的src路径应该是/images/你的新图片名.png，而非/public/images/xxx.png。

修改后的next/image代码示例：

<Image
  src="/images/新图片名.png"
  alt="Image"
  fill
  objectFit="contain"
/>

注意：Next.js 13及以上版本中layout="fill"已废弃，直接使用fill属性即可。

2. 图片文件本身无效 #

• 检查图片后缀是否和实际文件类型匹配：比如把JPG文件改名为PNG后缀，会导致系统识别为无效图片，可通过图片查看器确认文件是否正常打开。
• 检查文件名是否包含特殊字符（空格、中文、特殊符号等），建议改为英文小写+下划线的命名方式（比如new_banner.png）。
• 重新上传图片到/public/images目录，确保文件未损坏。

3. 缓存问题 #

• 开发环境下重启Next.js dev服务器：停止当前npm run dev进程后重新启动，避免旧资源缓存导致路径映射错误。
• 清理浏览器缓存，或使用无痕模式访问页面测试。

4. Next.js图片配置问题 #

如果项目中next.config.js配置了images.domains，确保未限制本地静态资源访问。本地public目录下的资源默认无需配置domains，若误配置限制规则可能引发400错误。

示例基础配置（无需额外配置本地资源）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: false, // 默认开启优化，本地资源无需额外配置
  },
};

module.exports = nextConfig;

内容的提问来源于stack exchange，提问作者John Albert Flores