Next.js使用next/image加载本地图片返回400 Bad Request错误

检查文件路径与大小写 #

• 确认public目录下的media文件夹和header-logo.png文件名完全匹配（Linux/macOS及部署环境区分大小写，Windows不区分，但要保持一致避免跨环境问题）。
• 核对组件中src="/media/header-logo.png"的路径和实际文件路径，确保没有多/少斜杠、拼写错误。

修正next.config.mjs配置 #

确保next.config.mjs的images配置正确包含本地域名，修改后必须重启开发服务器：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['localhost'],
    // 若静态导出或无需优化，可临时尝试开启：
    // unoptimized: true,
  },
};

export default nextConfig;

验证public目录结构 #

确认public/media/header-logo.png确实存在，未误放入src等其他目录——Next.js会将public目录下的文件直接映射到网站根路径。

临时禁用图片优化排查 #

在组件中添加unoptimized属性，若图片能正常加载，说明问题出在图片优化配置环节：

<Image
  src="/media/header-logo.png"
  width={200}
  height={200}
  className="hidden md:block"
  alt="Logo"
  unoptimized
/>

清理缓存 #

• 删除项目根目录下的.next文件夹，重新执行npm run dev。
• 用浏览器无痕模式打开页面，或手动清理浏览器缓存后测试。

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