从 Map 连接本地路径 + 动态图像 - React.Js

Question

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(
  <li><img key={item.id} src={"assets/images/sampleImages/" + item.image}/></li>
  )
})

Code - PasteBin

but i cannot get the image. No error, just a broken image icon appear.

I've try:

This solution And with URL works, but don't work with path.

Also this thread . And nothing works.

Answer 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>
  )
})

Answer 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 } />