Estoy aprendiendo ReactJS y estoy tratando de mostrar una lista de redes sociales de una variedad de objetos así:

 const baseUrl = "./"; export const SocialData = [ { platform: "Linkedin", link: "https://www.linkedin.com/in//", icon: baseUrl + "linkedin.png", }, { platform: "Github", link: "https://github.com/", icon: baseUrl + "github.png", }, ];

Luego, en mi componente, lo mostraría así:

 import { SocialData } from "../../data/social"; import "./socials.css"; function Socials() { const data = SocialData; return <div className="social-contact"> {/* <img src={require('./linkedin.png')}/> */} { data.map((item) => { return ( <a href={item.link} key={item.platform}> <div className="social-icon-div"> <img src={ require(item.icon) } className="social-icon" /> </div> </a> ) })} </div>; }

La imagen comentada funciona bien, pero cuando trato de hacer lo mismo en mi mapa, dice y arroja este error:

Error no detectado: no se puede encontrar el módulo './linkedin.png' en webpackEmptyContext (socials|sync:2:1) en Socials.js:14:1 en Array.map () en Socials (Socials.js:7:1) en renderWithHooks (react-dom.development.js:14985:1) en mountIndeterminateComponent (react-dom.development.js:17811:1) en beginWork (react-dom.development.js:19049:1) en HTMLUnknownElement.callCallback (react -dom.development.js:3945:1) en Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) en invocarGuardedCallback (react-dom.development.js:4056:1)

He intentado poner el requerimiento en los datos directamente, hace lo mismo. yo también probé

<img src={requerir( "" + props.src )} alt={props.imageAlt} />

Como se explica aquí, pero nada hizo el trabajo. ¡Gracias por tu ayuda!