why Images don't appear when I put the src in array (ReactJs)

Question

Is there any problem of using array to save src in it to display on component, it doesn't work?

    const imgs = [
      './../imgs/book1.jpg',
      './../imgs/book2.jpg',
      './../imgs/book3.jpg',
    ]
    const displayImg = imgBooks.forEach(img => {
      return (
           <figure>
            <img src={img} alt='book' />
          </figure>**strong text**
      )
    })

Shouldn't you be calling `foreach()` on the imgs array instead of the imgBooks array since the imgs array has the images in it. Otherwise it would be helpful to see the code where the variable imgBooks is created. — Raymond Mutyaba, Jun 19 '20 at 22:34
`forEach` will not return an array so you want to use `map`. https://stackoverflow.com/a/34426481/1370487 — UX Nomaan, Jun 20 '20 at 00:20

SKi · Answer 1 · 2020-06-22T15:41:12.753

2

The forEach() function for arrays returns undefined.

If you want to show several images at the same time, choose function that return array of components: map()

const displayImgs = imgBooks.map(img => {

If your component contain only components of the array, then you can simple return the array:

const imgBooks = [
  './../imgs/book1.jpg',
  './../imgs/book2.jpg',
  './../imgs/book3.jpg',
]
return imgBooks.map(img => (<figure><img src={img} alt='book' /></figure>));

Note the name of the array: imgBooks. There was imgs vs imgBooks typo(?) in the question.

edited Jun 22 '20 at 15:41

answered Jun 19 '20 at 22:00

SKi

8,007
2
26
57

thanks, I really appreciate that it is helpful but the problem still there – aya hosny Jun 19 '20 at 23:03
1

`imgs` will be transformed into an array of your JSX elements which React still needs to render by using `.map` in your render function or your functional component return. – UX Nomaan Jun 20 '20 at 00:23
Added example of return. – SKi Jun 22 '20 at 15:41

score 2 · Answer 2 · answered Jun 20 '20 at 00:27

You need to make sure that you transform your imgs array to another array that includes your JSX markup. From there, you need to iterate over your markup array for React to render each index of displayImg array.

const Component = () => {

    const imgs = [
        './../imgs/book1.jpg',
        './../imgs/book2.jpg',
        './../imgs/book3.jpg',
    ];

    const displayImg = imgs.map(img => {
        return (
            <figure>
            <img src={img} alt='book' />
            </figure>**strong text**
        )
    });


    return displayImg.map(img => img);

}

score 1 · Answer 3 · answered Jun 20 '20 at 08:18

If you are using create-react-app all your asset are bundled and they have different names. So, dynamic import so won't work. To overcome this you add all your images in public folder then

{ imgs.map((img) => (
   <figure>
      <img src={process.env.PUBLIC_URL + `/${data.photo}`}/>
   </figure>
))

score 0 · Answer 4 · answered Jun 21 '23 at 12:01

This worked for me:

     {productId && images.length > 0
                ? images.map((x, index) => (
                      <img
                        src={`${backend_url}${x}`}
                        key={index}
                        alt=""
                        className="h-[120px] w-[120px] object-cover m-2"
                      />
                  ))
                 :null 
                  ))}

why Images don't appear when I put the src in array (ReactJs)

4 Answers4