Here is my index.js file where i take images.

export const dataList = [
  {
    category: "Arts",
    cuisine: "Bamboo",
    id: 1,
    title: "Bambooza - Bamboo Arts and Crafts",
    price: 499,
    image: "./images/bambooza_arts.png",
    rating: 5
  },
  {
    category: "Material",
    cuisine: "Bags",
    id: 2,
    title: "Recycled Eco-friendly Bag",
    price: 199,
    image: "./images/bag_2.png",
    rating: 4
  },
  {
    category: "Material",
    cuisine: "Bamboo",
    id: 3,
    title: "Bambooza Box with Lock | Eco-friendly",
    price: 199,
    image: "images/box_bamboo.png",
    rating: 3
  },
  {
    category: "Material",
    cuisine: "Cups",
    id: 4,
    title: " Biodegradable Compostable White up | Craft Double Wall | Bamboo Fiber TravelMug ",
    price: 99,
    image: "images/white_cup.png",
    rating: 5
  },
  {
    category: "Material",
    cuisine: "Recycled",
    id: 5,
    title: "Ecofriendly Chipboard Binders (3 nit) Recycled Binders |",
    price: 129,
    image: "images/binder_image.png",
    rating: 3

  },
];

CodePudding user response：

You can import the file and then loop it over the array and then access the image in the object and do something like this inside the loop -

<img src={arr.image} /> assuming you named the variable inside arr while looping.

CodePudding user response：

map through each element in dataList and take the image path and put it in the etc like so

{dataList.map(elem => {
    <img src={elem .image} alt={elem.title}/>
})}