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.