如何在Next.js 13组件中发布图片数组？本地图片路径失效求助

核心问题原因 #

在Next.js 13+的App Router模式下，本地图片直接用相对字符串路径（如./next.svg）给<Image>组件会失效，这是框架本身的资源处理逻辑导致的——编译器无法解析相对路径的本地资源进行构建优化，因此无法正常加载。即使清空nextConfig也无法解决，因为这和配置无关。

两种有效本地图片引用方式 #

• 方式一：通过import导入图片（已验证有效）
  这是最稳妥的方式，编译器会自动处理图片资源：

  import nextImg from '../public/next.svg';
  <Image src={nextImg} alt={'logo.text'} width={32} />
  

• 方式二：使用public目录的绝对路径
  如果不想逐个import，可直接使用从public目录根开始的绝对路径（注意开头的/）：

  <Image src={'/next.svg'} alt={'Next text'} height={32} width={32} />
  

  这里的/next.svg对应项目根目录下public/next.svg文件。

图片数组的处理方案 #

如果需要使用图片数组，只需把所有需要的图片提前import后存入数组即可：

import img1 from '../public/img1.svg';
import img2 from '../public/img2.svg';
import img3 from '../public/img3.svg';

const imageList = [img1, img2, img3];

// 渲染数组内图片
{imageList.map((img, idx) => (
  <Image key={idx} src={img} alt={`图片${idx+1}`} width={32} height={32} />
))}

内容的提问来源于stack exchange，提问作者Макс Самоделкин