Hay una lista de cientos de imágenes PNG con nombres que consisten solo en 2 letras, por ejemplo , aa.png, ab.png, ac.png , etc.
Hay un punto final que devuelve una matriz de objetos que tienen un nombre de propiedad que tiene 3 letras, las 2 primeras son las mismas letras que las de las imágenes PNG, por ejemplo:
[{ name: 'aax', ... }, { name: 'aby', ... }, { name: 'acq', ... }, ... ]Mapearé a través de esta matriz, para cada elemento será un componente que mostrará información para ese objeto específico y también debería mostrar las imágenes con los mismos primeros 2 caracteres.
Aquí está mi implementación:
import React from 'react'; import ListItem from '@material-ui/core/ListItem'; const MyComponent = (data) => { const flag = `../flags/${data.name.substring(0, 2).toLowerCase()}.png`; return ( <ListItem> <div> <div>Info: {data.info}</div> <img src={flag} alt='this is a flag' /> </div> </ListItem> ); }; export default MyComponent;No toma ninguna imagen, no sé por qué. Todas esas imágenes se encuentran en esa carpeta de banderas.
¿Alguna idea de como resolver esto?
Es posible que deba usar require . Puedes usar:
const flag = require(`../flags/${data.name.substring(0, 2).toLowerCase()}.png`);