Estoy tratando de renderizar imágenes en reaccionar usando require(). A continuación se muestra una instantánea del código que está funcionando.

 const ProjectBlock: React.FC<{ data: PROJECTBLOCK }> = (props) => { const baseUrl = "../../../assets/images/forkify.png"; return ( <div className="projectblock"> <div className="projectblock__heading"> <h3 className="subheading-default margin-bottom">{props.data.heading}</h3> <p className="para">{props.data.content}</p> <h4 className="smallheadin">{props.data.technologies.join(" · ")}</h4> </div> <img src={require("../../../assets/images/forkify.png")} alt="" className="projectblock__image" /> </div> ); };

En el caso anterior, paso una cadena a la función require(). Sin embargo, cuando intento almacenar la cadena en la variable baseUrl y la paso a la función require(), no funciona y da el siguiente error en la consola.

 Uncaught Error: Cannot find module '../../../assets/images/forkify.png'

Así es como estoy tratando de usar la variable con require()

 const ProjectBlock: React.FC<{ data: PROJECTBLOCK }> = (props) => { const baseUrl = "../../../assets/images/forkify.png"; return ( <div className="projectblock"> <div className="projectblock__heading"> <h3 className="subheading-default margin-bottom">{props.data.heading}</h3> <p className="para">{props.data.content}</p> <h4 className="smallheadin">{props.data.technologies.join(" · ")}</h4> </div> <img src={require(baseUrl)} alt="" className="projectblock__image" /> </div> ); };

Incluso he probado con literales de plantilla. ¡Por favor ayuda!