Concatenate Local Path + Dynamic Images From Map - React.js

i'm trying to do a CardList items from a local data.json file using React.Js. To load the data i'm using a map function: const ItemsList = data.map(item=>{ return(

Solution 1:

Firstly import the image like this (You can amend it accordingly)

import imageBaseURL = "./assets/images/sampleImages/";

Then inside your ItemList make use of Template Literals like this :

constItemsList = data.map( item => {
  return(
  <li><imgkey={item.id}alt="TitleOfImage"src={`${imageBaseURL}${item.image}`}/></li>
  )
})

Solution 2:

First step:

Importing image and store it in one variable ( ExampleImg )

importExampleImgfrom'../example.png';

Second step:

Inject the image as a src

<imgsrc = {ExampleImg } />

Share