Display images with a loop in a React component

Question

I am using Gatbyjs, and I would like to display multiple images in a card component. It seems that this solution shoud work, but it does not. I don't get any other specific error than:

GEThttp://localhost:8000/[object Module]
[HTTP/1.1 404 Not Found 13ms]

I tried to use an absolute path for the src attribute and it didn't work either. Neither did something nasty like importing every images in the file of the card component, and calling them this way:

<img src={`${Img}`} />.

Here is the component:

const ServiceCard = ({ title, subtitle, text, logos }) => {
    const displayLogos = logos.split(",").map((logo) => (
        <li key={logo} className="tech-logo">
            <img
                key={logo}
                src={require(`../../images/tech-logos/${logo}.png`)}
                alt={`${logo} logo`}
                height="30px"
                width="30px"
            />
        </li>
    ));

    return (
        <div className="service-card">
            <h1 className="service-card-title">{title}</h1>
            <h2 className="service-card-subtitle">{subtitle}</h2>
            <p className="service-card-text">{text}</p>
            <ul className="tech-logo-list">{displayLogos}</ul>
        </div>
    );
};

Edit: This is the way this component is used :

<ServiceCard
    title="Text string"
    subtitle="e-shop"
    text="random text"  
    logos="React,Ror,Gatsby,Wordpress,Drupal,Js,Php,Mysql,Pgsql"
/>

So as we can expect, console.log("tech is " + logo); in displayLogos returns a new string for every string concatenated between comma.

Question, are you at least able to import and view one of the images in your component (without the loop)? Just to verify path and accessibility to the image. — EspressoBeans
– EspressoBeans, Commented Aug 17, 2021 at 17:55
Yes, if I do it the regular way it works : import testimg from "../../images/tech-logos/React.png"; and <img src={testimg} />. — Lou
– Lou, Commented Aug 17, 2021 at 18:45
This question is focusing on the React/looping aspect, but it seems like really what you need to look for is solutions to a dynamic require() Could you perhaps require the entire directory of logo images at the top of the file instead? — DBS
– DBS, Commented Aug 18, 2021 at 9:34

Lou · Accepted Answer · 2021-08-18 09:44:00Z

1

Well, I managed to solve this by adding .default at the end of the require():

    const displayLogos = logos.map((logo) => (
        <li key={logo} className="tech-logo">
            <img
                key={logo}
                src={require(`../../images/tech-logos/${logo}.png`).default}
                alt={`${logo} logo`}
                height="30px"
                width="30px"
            />
        </li>
    ));

Found the idea here.

answered Aug 18, 2021 at 9:44

Lou

1661 gold badge1 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

Display images with a loop in a React component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related