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 :
const ItemsList = data.map( item => {
return(
<li><img key={item.id} alt="TitleOfImage" src={`${imageBaseURL}${item.image}`}/></li>
)
})
Solution 2:
First step:
Importing image and store it in one variable ( ExampleImg )
import ExampleImg from '../example.png';
Second step:
Inject the image as a src
<img src = { ExampleImg } />
Post a Comment for "Concatenate Local Path + Dynamic Images From Map - React.Js"