Next.js中如何从数组获取图片？Vite转Next.js图片加载问题

Next.js对静态资源的处理逻辑和Vite不一样，你遇到的问题核心是：导入的图片在Next.js里（尤其是App Router模式下）不是纯路径字符串，原生<img>无法直接识别；而直接写Image组件实例能显示，是因为Next.js的Image组件能正确解析导入的资源元数据。

下面是几种简便的解决方法，不用逐个写Image组件实例：

方法一：用Next.js Image组件批量渲染（推荐） #

这个方法不用改常量数组的结构，还能享受Next.js的图片优化功能：

1. 先把常量数组统一改成存图片导入值：

// constants/index.js
import { image1, image2, image3 } from "../assets";

export const myArray = [
  {
    title: "Image 1",
    image: image1,
  },
  {
    title: "Image 2",
    image: image2,
  },
  {
    title: "Image 3",
    image: image3,
  }
];

2. 在组件里循环渲染时用Next.js的Image组件：

import { myArray } from "../constants";
import Image from "next/image";

export default function MyComponent() {
  return (
    <div>
      {myArray.map((item, idx) => (
        <div key={idx}>
          <h3>{item.title}</h3>
          <Image
            src={item.image}
            alt={item.title}
            width={100}
            height={100}
          />
        </div>
      ))}
    </div>
  );
}

方法二：兼容原生img的写法（不推荐） #

如果一定要用原生<img>，分两种情况处理：

• 要是用的Pages Router：导入的图片就是路径字符串，直接写src={item.image}就行，和Vite里的用法一致。
• 要是用的App Router：导入的图片是带元数据的对象，得取src字段：

// 组件中渲染代码
<img
  src={item.image.src}
  alt={item.title}
  width={100}
  height={100}
/>

方法三：用public文件夹存图片（适合简单场景） #

把图片放到项目根目录的public/images文件夹里，常量数组直接写相对路径：

// constants/index.js
export const myArray = [
  {
    title: "Image 1",
    image: "/images/image1.png",
  },
  {
    title: "Image 2",
    image: "/images/image2.png",
  },
];

然后组件里用原生<img>引用路径即可，但这种方式Next.js不会自动优化图片，只适合对性能要求不高的场景。

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