How can I render images in a loop in React?

Question

I am trying to create a card with a title, description and an image.

My file structure looks like:

src
 -components
 -images
 -section
   -Featured.js

In a config.js file I have:

module.exports = {

  featuredSection: [
    {
      name: 'beer-image-1',
      title: 'Mango Cart',
      description:
        'A light Wheat Ale bursting with lots of 
         fresh mango flavor and aroma, finishing 
         crisp and refreshing.',
    },
  ],
};

In my Featured.js component file I have tried:

const Featured = () => {
...

// Get array of all names in config file
const featuredNames = featuredSection.map((beer) => beer.name); // --> ['beer-image-1']

// Return an image for each name in `featuredNames` array
const images = featuredNames.map((image) => {
  return (
    <img
      key={image}
      src={require(`../images/${image}.jpg`)}
      alt='Beer picture'
    />
  );
});


  // Return title, desc., and image
  const card = featuredSection.map((image, i) => {
    return (
      <div key={i}>
        <h1>{image.title}</h1>
        <p>{image.description}</p>
        {images}
      </div>
    );
  });

  return <>{card && card}</>;
}

This returns the title, and description but the image is not loading and only shows the alt text.

I've been trying to make use of these examples but it always results in the alt text showing up.

try to apply style to img tag such as giving it a width and height — Isaac
– Isaac, Commented Aug 25, 2021 at 3:39

kiranvj · Accepted Answer · 2021-08-25 04:10:50Z

3

Can you move your images folder to public folder? If you can the below code should work

<img
  key={image}
  src={`./images/${image}.jpg`}
  alt='Beer picture'
/>

If you cannot move the images folder try below. Use the default property of require. Its should have the image src.

const images = featuredNames.map((image) => {

  const img = require(`../images/${image}.jpg`).default;

  return (
    <img
      key={image}
      src={img}
      alt='Beer picture'
    />
  );
});

edited Aug 25, 2021 at 4:10

answered Aug 25, 2021 at 4:02

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

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

2 Comments

agw2021 Over a year ago

Using the .default worked! What exactly did that change?

kiranvj Over a year ago

@agw2021 require returns an object, if you look at the img src in console you will see something like <img src=[Object object]... /> The actual src will be in default property. Please see this also

GarySailor34 · Accepted Answer · 2021-08-25 04:02:05Z

1

I think in the img JSX, the src attribute does not need to add require(). It simply would check for your directory structure based on your relative path.

return (
  <img
    key={image}
    src={`../images/${image}.jpg`}
    alt='Beer picture'
  />
);

Also, I think it can be map the featuredSection directly to get the image path. I admit that it would be convenient if your item's name is same as your image's name. it would like:

const card = featuredSection.map((item, i) => {
  return (
    <div key={i}>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
      <img
        src={`../images/${item.name}.jpg`}
        alt='Beer picture'
      />
    </div>
  );
});

edited Aug 25, 2021 at 4:02

answered Aug 25, 2021 at 3:55

GarySailor34

759 bronze badges

Collectives™ on Stack Overflow

How can I render images in a loop in React?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related