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

No need to use `require()`. The browser will make the request — charlietfl, Jul 01 '18 at 18:53
If I don't use require it will not give me any error message, but The image will not be rendered. — Sarmad S., Jul 01 '18 at 18:55
Then relative path is probably wrong. Inspect image requests in browser dev tools network. — charlietfl, Jul 01 '18 at 18:56
I have tired to console.log(imageArray[i]) and I got the image path correct. I am 100% sure the path is correct. — Sarmad S., Jul 01 '18 at 18:59

score 2 · Answer 1 · answered Jul 01 '18 at 19:00

2

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

answered Jul 01 '18 at 19:00

Niroshan Ranapathi

3,007
1
25
35

I get the same result – Sarmad S. Jul 01 '18 at 19:05
console.log(data) in line 3 please – Niroshan Ranapathi Jul 01 '18 at 19:06
console.log(imageArray[i]) gives "../images/a.png", but the image will not render unless I use require. Using require will give the error I mentioned. – Sarmad S. Jul 01 '18 at 19:09
okay. replace this way .. tell me what happend – Niroshan Ranapathi Jul 01 '18 at 19:11
are you using webpack ? – Niroshan Ranapathi Jul 01 '18 at 19:20
After running npm start all images go to a different folder (static/media/a.f23f2f.png) and they are given an ID like "a.47df83.png" – Sarmad S. Jul 01 '18 at 19:26

Prajval M · Accepted Answer · 2018-07-01T19:21:54.533

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.

edited Jul 01 '18 at 19:21

answered Jul 01 '18 at 19:06

Prajval M

2,298
11
32

Thanks for the reply. I will try this and see if it works – Sarmad S. Jul 01 '18 at 19:18
Why do I get this error: TypeError: r.keys is not a function? am I supposed to change something in your importAll function? – Sarmad S. Jul 01 '18 at 19:39
Are you using webpack ? – Prajval M Jul 02 '18 at 16:11
Yes webpack is used – Sarmad S. Jul 02 '18 at 16:34
How are you requiring the json file. You need to use require.context – Prajval M Jul 02 '18 at 16:41
I got it thanks for the help. Finally I was able to make it work, I followed this: https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack that is almost the same as your solution. – Sarmad S. Jul 02 '18 at 16:44

score 2 · Answer 3 · answered Jul 01 '18 at 19:09

2

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.

answered Jul 01 '18 at 19:09

ManavM

2,918
2
20
33

I am using react with webpack. I have used something called "create react app" that I installed using npm. This is my first react project so I don't know much. – Sarmad S. Jul 01 '18 at 19:21
looking at the folder structure of create-react-app it looks like it doesnt use express but it does have a [public folder](https://github.com/wmonk/create-react-app-typescript/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files) that will do the work. It's a small section and fairly self explanatory. – ManavM Jul 02 '18 at 04:56

score -1 · Answer 4 · answered Jul 01 '18 at 18:55

-1

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

answered Jul 01 '18 at 18:55

Himanshu Kushwah

1
1

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

4 Answers4