Как я могу импортировать несколько изображений в React? У меня есть объект вместо пути

Question

Я пытаюсь загрузить изображения из компонента, который я назвал «Изображения» во втором компоненте. Я импортирую «Изображения», такие как «Импортировать изображения из ./Images», и получаю массив объектов. В объекте у меня есть дополнительная информация и путь. Но путь - это не текст, а объект.

Я попытался импортировать напрямую одно изображение в компоненте (не из другого файла), и я получил путь. Почему однажды я получаю путь, а однажды возражаю?

Мой код для импорта изображений с диска:

import img0 from "../images/promo/1.jpg";
import img1 from "../images/promo/2.jpg";
import img2 from "../images/promo/3.jpg";

const Images = [
  {
    id: 0,
    path: { img0 },
    description: "description 1",
    name: "photo1"
  },
  {
    id: 1,
    path: { img1 },
    description: "description 2",
    name: "photo2"
  },
  {
    id: 2,
    path: { img2 },
    description: "description 3",
    name: "photo3"
  }
];

export default Images;

В другом компоненте я получаю массив изображений

import Images from "../components/Images";
console.log(Images[0]);

Ожидается вывод:

{
  description: "description 1",
  id: 0,
  name: "photo1",
  path: "/static/media/1.jpg"
}

но вывод:

{
  description: "description 1",
  id: 0,
  name: "photo1",
  path: {img0: "/static/media/1.jpg"}
}

Answer 1

path: { img0 } - сокращенная запись для path: { "img0": img0 }. Вот почему вы получаете это.