How to map multiple images in ReactJS-CodePudding

I'm trying to map multiple images in ReactJS. Here is the code:

{Object.entries(images).map((image, index) => {
     <img src={image[1].default} width="640" height="480" id={'image'   index} alt={'image'   index} />
})}

Object.entries(images) looks like this -> image

Also if I use console.log in the map console.log(image[1].default); -> image

The problem is that in the browser I can't see any image, if I add manually a location from the second image the image is showing. e.g: <img src="/static/media/Z25777766_Depth.f835eabd.bmp" width="640" height="480" id={'image' 1} alt={'image' 2} />

Webstorm IDE show this error: Expression statement is not assignment or call

Images are imported from folder with:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(bmp)$/));

CodePudding user response：

You need to dynamically require the image from webpack

{Object.entries(images).map((image, index) => 
     <img src={require(image[1].default)} width="640" height="480" id={'image'   index} alt={'image'   index} />
)}

CodePudding user response：

You are not returning any image from map.

Try this:

{Object.entries(images).map((image, index) => 
     <img src={image[1].default} width="640" height="480" id={'image'   index} alt={'image'   index} />
)}