Concatenate local path + dynamic images from 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>
  )
})

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.

Have you tried with "require"? It should be like this: src={require('./assets/images/sampleImages/${item.image}')} — Rodius
– Rodius, Commented Feb 15, 2018 at 11:20

Aaqib · Accepted Answer · 2018-02-15 11:53:13Z

2

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

answered Feb 15, 2018 at 11:53

Aaqib

10.4k4 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sundar · Accepted Answer · 2018-02-15 12:08:24Z

0

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

answered Feb 15, 2018 at 11:24

sundar

12710 bronze badges

i cannot store it in one variable because the path it's static and the name.jpg change according the image. maybe 2 variables ?