Next.js Image组件无法加载图片 自动加_next/image前缀404如何解决？

问题原因 #

Next.js 内置的Image组件默认会开启图片优化能力，所有图片请求会先走/_next/image这个内置API路由做压缩、格式转换、自适应裁剪等处理后再返回，因此不会像原生img一样直接请求原资源路径。你遇到的请求路径拼接异常、404问题通常是配置错误或参数格式错误导致的。

修复方案 #

1. 排查并修正next.config.js配置 #

首先确认配置文件中没有错误修改images.path、自定义loader逻辑写错的情况，如果没有特殊需求，保持默认的图片优化配置即可。
如果需要加载外部域名的图片，需要添加域名白名单：

• Next.js 12及更早版本配置：

// next.config.js
module.exports = {
  images: {
    domains: ['你要加载的外部图片域名，例如img.example.com'],
  },
}

• Next.js 13+ App Router版本配置：

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '你要加载的外部图片域名',
        pathname: '**',
      },
    ],
  },
}

2. 修正public文件夹图片的使用方式 #

public文件夹下的资源可以直接通过根路径访问，不需要导入，两种正确用法二选一即可：

用法1：直接传路径字符串，不需要导入

<Image 
  className={styles.imgHomeBlock} 
  src="/google-map-fake.jpg"
  alt='Commercial' 
  width={500} 
  height={500}
/>

用法2：导入后直接传变量，注意宽高要传数字类型，不能传字符串

import testImg from '../../public/google-map-fake.jpg';

<Image 
  className={styles.imgHomeBlock} 
  src={testImg}
  alt='Commercial' 
  width={500} 
  height={500}
/>

3. 不需要图片优化的处理方案 #

如果不需要Next.js的图片优化能力，想和原生img一样直接加载原资源，可以通过两种方式关闭优化：

单组件关闭：给Image组件加unoptimized属性

<Image 
  className={styles.imgHomeBlock} 
  src={testImg}
  alt='Commercial' 
  width={500} 
  height={500}
  unoptimized
/>

全局关闭：在next.config.js中添加配置

// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
}

关闭优化后Image组件就不会再自动添加/_next/image前缀，和原生img行为完全一致。

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