Estoy usando Gatbyjs y me gustaría mostrar varias imágenes en un componente de tarjeta. Parece que esta solución debería funcionar, pero no es así. No obtengo ningún otro error específico que:

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

Traté de usar una ruta absoluta para el atributo src y tampoco funcionó. Tampoco algo desagradable como importar todas las imágenes en el archivo del componente de la tarjeta y llamarlas de esta manera:

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

Aquí está el componente:

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

Editar: esta es la forma en que se usa este componente:

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

Entonces, como podemos esperar, console.log("tech is " + logo); en displayLogos devuelve una nueva cadena para cada cadena concatenada entre comas.