NextJS 12.2.4如何确保图片始终从统一路径加载？

三种不同的图片URL，是因为NextJS对不同加载方式的图片处理逻辑不同：

• two-wheelers/_next/static/media/imageName.png：公共目录下的图片被NextJS打包为静态媒体资源，自动添加了配置的assetPrefix，属于正常的打包输出路径。
• two-wheelers/images/imageName.png：这是直接用原生<img>标签手动引用public目录下images文件夹内的图片生成的路径，若代码中部分引用未拼接assetPrefix，就会出现不带前缀的错误请求。
• two-wheelers/_next/image?url=...：使用next/image组件加载图片时，NextJS会启用内置的图片优化服务，自动生成带assetPrefix的优化路由路径，这是组件的默认行为。

1. 统一使用next/image组件（推荐） #

NextJS 12.2.4推荐用next/image处理所有图片，它会自动适配assetPrefix、提供图片优化，且路径统一为优化路由格式：

import Image from 'next/image';

// 引用public/images下的图片
<Image src="/images/imageName.png" alt="图片描述" width={300} height={200} />

同时在next.config.js中补充图片优化路径配置，确保前缀生效：

module.exports = {
  assetPrefix: '/two-wheelers',
  images: {
    path: '/two-wheelers/_next/image',
  },
};

2. 规范原生<img>标签的路径写法（若必须使用） #

如果需要保留原生<img>，不要写固定路径，通过环境变量拼接assetPrefix，避免遗漏前缀：

1. 在.env文件中配置客户端可访问的环境变量：

NEXT_PUBLIC_ASSET_PREFIX=/two-wheelers

2. 代码中拼接路径：

const assetPrefix = process.env.NEXT_PUBLIC_ASSET_PREFIX || '';

<img src={`${assetPrefix}/images/imageName.png`} alt="图片描述" />

3. 验证重写规则覆盖所有图片路径 #

确保代理的重写规则能正确转发所有带/two-wheelers前缀的图片请求：

• 转发/two-wheelers/_next/*到NextJS的静态资源与图片优化服务；
• 转发/two-wheelers/images/*到应用的public/images目录（若存在手动引用的情况）。

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