Блог

Главная - Вопросы по программированию - Возникла проблема с импортом локального изображения в Next.js

Возникла проблема с импортом локального изображения в Next.js

#image #next.js

Вопрос:

Я пытаюсь импортировать локальное изображение, сохраненное в общей папке в моем 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

Комментарии:

1. когда мы импортируем изображение, на самом деле мы импортируем объект изображения, который имеет множество свойств. Попробуйте значок входа в систему. Я точно не помню, но объект image содержит свойство src, в котором указан адрес изображения. Вместо значка это должен быть значок.src

2. Next.js поддерживает только статически импортированные изображения в следующих форматах: .jpg , .png , или .webp . Попробуйте вместо этого использовать строку пути для SVG, т. Е. image: "/assets/undraw_barbecue_3x93.svg" .

Метки: