Tengo las siguientes imágenes en una carpeta src/assets de un proyecto React.

 src/assests/ a.webp b.webp c.webp

Me gustaría definir un componente funcional que sea un div que contenga la imagen correspondiente a su nombre (el nombre es una cadena).

Puedo conseguir que siempre sea 'a'

 import a from "./assets/a.webp"; function ImageTile({name}){ return <div> <img src = {a}/> </div> }

Pero si lo cambio a esto para tratar de ser más general, entonces la imagen no se carga correctamente.

 function ImageTile({name}){ return <div> <img src = {eval(name)}/> </div> }

Incluso si esto funcionó, parece tedioso tener que importar cada imagen. Me complace guardar las imágenes en otro lugar dentro del directorio de la aplicación de reacción.

Aquí hay una esencia de github con un ejemplo completo de App.js si ayuda a las personas a entender lo que estoy tratando de hacer.

https://gist.github.com/oli5679/96f4549d82b1897a91c2528a4651cd51

También probé el enfoque sugerido aquí , pero aparece un error.

 function importAll(r) { let images = {}; r.keys().map(item => { images[item.replace('./', '')] = r(item); }); return images; } const images = importAll(require.context('./assets', false, '/\.webp/')); console.log(images); # require__(...).context is not a function