Next.js中图片无法显示问题求助

我是React新手，正在尝试遍历数组展示多张图片，所有图片存放于public/images文件夹中。相关代码如下：

Hero组件代码 #

import React from 'react';
import { bagsTypes } from '@/const/types';
import Image from 'next/image';

function Hero({ bags }: { bags: bagsTypes[] }) {
  return (
    <div>
      {bags.map((bag) => {
        return (
          <div key={bag.id}>
            <h1>{bag.name}</h1>
            <Image
              alt={`bag-${bag.id}`}
              height={150}
              width={100}
              src={`/images/${bag.image}`}
            />
          </div>
        );
      })}
    </div>
  );
}

export default Hero;

数据定义代码 #

import { bagsTypes } from './types';

const bags: bagsTypes[] = [
  { id: 1, name: 'bag1', image: 'bag1.png' },
  {
    id: 2,
    name: 'bag2',
    image: 'bag2.png',
  },
];

export default bags;

当前图片无法正常显示，请问是否需要在某处导入图片？

不需要单独导入图片，你的写法本身是符合Next.js规则的——public目录下的资源可以直接通过/images/[文件名]这种绝对路径访问，不用额外写import语句。

图片没显示出来，建议排查这几个实际问题：

• 确认public/images文件夹里确实存在bag1.png和bag2.png，文件名（包括大小写）要和数组里的完全一致
• 检查src路径有没有拼写错误，比如多写/漏写斜杠、文件夹名写错
• 如果是较新版本的Next.js，确认next.config.js里没有限制本地图片访问（不过本地public资源默认是允许的，一般不用额外配置）

你的代码逻辑没问题，重点核对图片文件的实际存放路径和文件名即可。

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