How to render a number of image-elements with different src in react

Question

Here is what I am trying to do:

imageArray = ["../images/a.png", "../images/b.png"];

function renderImages(number){
  const imageElements = [];
  for(let i = 0; i < number; i++){
      const imageSrc = imageArray[i];
      imageElements.push(<img src={ require(imageSrc) } alt=""/>);
  }
  return imageElements;
}

The code works fine, the problem is the image source, I can put a static image source and it will work (I tried that), but when the source is dynamic (data coming form an array which is coming form a json file) does not work. Is there any solution to this?

Thanks in advance!

Edit:

The error I get is: Error: Cannot find module ".".

This could be a webpack problem

SOLUTION

For people who have the same problem, I was able to solve this problem by following this link: Dynamically import images from a directory using webpack

Answer 1

Try this way

Json file data.json

{ 
 imageArray : ["../images/a.png", "../images/b.png"]
}

Change code like this

const data = require('./data.json');
const imageArray = data.imageArray;


function renderImages(number){
  const imageElements = [];
  for(let i = 0; i < number; i++){
      const imageSrc = imageArray[i];
      imageElements.push(<img src={imageSrc} alt=""/>);
  }
  return imageElements;
}

Answer 2

Create a module to export all images as imagelist

var cache = []; 

function importAll (r) { 
r.keys().forEach((key,index) => cache[index] = r(key));
} 
importAll(// your json here);

export default cache;

In your main module

import * as images from // whatever you name the module

var imageList = images.default
// Use imageList[I]

This happens because react uses webpack for bundling and each image will be specific to the newly bundled server.

To import individual images the react way use :

import image from //path to the image

PS : if any typos sorry. I am using mobile to type this answer.

Answer 3

I'm not sure what your project environment is so I'll be answering as if you're using a standard MERN stack though even if they are incorrect the core points remain.

Firstly, you are trying to use absolute paths like ../images/a.png and that is not recommended.

You should set up a static folder for your application and put your files in that. After that you can setup serving static files and then start using relative urls like /images/abc.png instead.

This makes it so that you dont have to use require to fetch them, but rather just use strings as relative urls and your server will take care of the rest.

Answer 4

image source resolved before js code comes into action. you have to statically write the image location.

function icon() {
    return require('../images/a.png');
}
in jsx -
<Image source={icon()} />