Rendering Array of Images in React

Question

I need help. I have been searching similar posts, but none of them solved my problem (imagesPool.js)

import React from 'react';
const imagesPool = [
  { src: './images/starbucks.png'},
  { src: './images/apple.png'},
  { src: './images/mac.png'}
];

export default imagesPool;

Rendering the images (App.js) :

import React from "react";
import imagesPool from './imagesPool';

const App = () => {
   return (
     <div>
       <img src={imagesPool} />
     </div>
)};

export default App;

Result : No images being displayed

`imagesPool` is an array. Also, I think you don't need to import React if you're just exporting an array? — Joseph D., Mar 03 '20 at 07:52
You need some lib to make it, by now it only shows the array content: the path string — keikai, Mar 03 '20 at 07:53
yes @JosephD. , any idea how to display the array of images . I don't want to use class. — Nano Man, Mar 03 '20 at 07:54
@NanoMan please see answers below. The point for the duplicate is to use `.map()` to iterate over an array. — Joseph D., Mar 03 '20 at 08:00

score 4 · Accepted Answer · edited Jan 14 '22 at 13:49

4

You should loop through your images because src expects a string location to the image.

import imagesPool from './imagesPool';

const App = () => {

  return (
     <div>
       {imagesPool.map((imgSrc, index) => (<img src={imgSrc.src} key={index} alt="Make sure to include a alt tag, because react might throw an error at build"/>))}
    </div>
)};

edited Jan 14 '22 at 13:49

Haneen Mahdin

1,000
1
7
13

answered Mar 03 '20 at 07:58

Muhammad Zeeshan

4,608
4
15
41

It doesn't work either. – Nano Man Mar 03 '20 at 08:04
That was a typo. Try now. – Muhammad Zeeshan Mar 03 '20 at 08:06
It shows 3 images icon, the real images don't show. – Nano Man Mar 03 '20 at 08:07
This means your image src is not valid. @JosephD. is right. Put your images folder in public – Muhammad Zeeshan Mar 03 '20 at 08:09
Earlier @JosephD. said that I needed to put my images folder in public, this solved my problem. But his comment disappeared, I can't find his comment. Problem solved! – Nano Man Mar 03 '20 at 08:15

Vlad Gheorghita · Answer 2 · 2020-03-03T09:09:34.740

1

You always need to import React from 'react' if you are rendering jsx/tsx. In your code, you are returning jsx, thus you need to import react.

    import React from 'react';
    import imagesPool from './imagesPool';

    const App = () => {
        return (
           <div>
               {imagesPool.map((image) => <img key={image.src} src={image.src} />)}  
           </div>
         )};
  export default App;

edited Mar 03 '20 at 09:09

answered Mar 03 '20 at 07:56

Vlad Gheorghita

120
4

thx, missed a closing bracket – Vlad Gheorghita Mar 03 '20 at 09:09

score 1 · Answer 3 · answered Mar 03 '20 at 07:58

1

In react you solve things like conditionals, iterating, etc. with javascript (Remember, <img> is also just javascript and gets parsed into React.createElement("img")).

Since img expects a string in the src-property, we need to iterate over the array of sources and produce an img-Element for every source:

<div>
{
  imagesPool.map(({ src }) => (<img key={src} src={src} />))
}
</div>

With key you tell react how to recognize that an element is the same with subsequent renderings.

answered Mar 03 '20 at 07:58

flq

22,247
8
55
77

I tried it, it shows 3 images icon, but the real images don't show. – Nano Man Mar 03 '20 at 08:02
consider that your src paths don't work - this has then nothing to do with react – flq Mar 03 '20 at 14:44

Rendering Array of Images in React

3 Answers3