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
– Raymond Mutyaba, Commented Jun 19, 2020 at 22:34
forEach will not return an array so you want to use map. stackoverflow.com/a/34426481/1370487 — UX Nomaan
– UX Nomaan, Commented Jun 20, 2020 at 0:20

UX Nomaan · Accepted Answer · 2020-06-20 00:27:24Z

2

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

}

answered Jun 20, 2020 at 0:27

UX Nomaan

4325 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SKi · Accepted Answer · 2020-06-22 15:41:12Z

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, 2020 at 15:41

answered Jun 19, 2020 at 22:00

SKi

8,5572 gold badges29 silver badges64 bronze badges

3 Comments

aya hosny Over a year ago

thanks, I really appreciate that it is helpful but the problem still there

UX Nomaan Over a year ago

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.

SKi Over a year ago

Added example of return.

Gnana Surya · Accepted Answer · 2020-06-20 08:18:15Z

1

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>
))

answered Jun 20, 2020 at 8:18

Gnana Surya

861 silver badge3 bronze badges

Comments

Awara Amini · Accepted Answer · 2023-06-21 12:01:56Z

0

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

answered Jun 21, 2023 at 12:01

Awara Amini

6326 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related