image - 在 Next.js 中导入本地图像时遇到问题

Question

我正在尝试导入保存在我的 next.js 项目的公用文件夹中的本地图像。最终目标是导入本地图像，将该图像保存在对象数组中，最后映射到数组并生成一组卡片。我以前用 React 做过这种方式。我使用了 SVGOMG 并将清理代码转换为 jsx ..

import Icon from "../public/assets/undraw_barbecue_3x93.svg";

const DUMMY_CHARACTERISTICS = [
  {
    id: "card1",
    image: Icon,
    title: "Insert text here",
    description: "Insert text here",
  },

const Characteristics = () => {
  return (
    <ul>
      {DUMMY_CHARACTERISTICS.map((item) => (
        <CharacteristicsCard
          key={item.id}
          id={item.id}
          image={item.image}
          title={item.title}
          description={item.description}
        />
      ))}
    </ul>
  );
};

const CharacteristicsCard = (props) => {
  return (
    <li id={props.id}>
      <Image src={props.image} width={150} height={150} />
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </li>
  );
};

Error Message: Can't resolve file path to image

标签： imagenext.js