Tengo el siguiente componente de React, llamado Profile , que importa y muestra una imagen de perfil específica. El enlace a la imagen de perfil se proporciona en sus accesorios.

 const Profile = ({name}) => ( <div> <img src={require(`./images/${name}.png`)} alt="" /> {/* Rest of component goes here */} </div> )

Por ahora, uso el require de Node.js para importar dinámicamente la imagen de perfil y funciona.

Aprendí que mezclar el require de Node.js y la import de ES6 generalmente se considera una mala práctica, por lo que estoy buscando una manera de usar la sintaxis de import() de ES6 para lograr el mismo efecto.

Esto es lo que probé:

 const Profile = ({name}) => { const [image, setImage] = useState("") useEffect(()=>{ import(`./images/${name}.png`).then(image => { setProfileImage(image.default) }) }, [name]) return ( <div> <img src={require(`./images/${name}.png`)} alt="" /> {/* Rest of component goes here */} </div> ) }

No funciona en absoluto. La compilación de desarrollo representa el <img /> sin atributo src .

Proporcione una solución. Gracias.