Estoy tratando de obtener imágenes dinámicamente de mi carpeta de imágenes en función de cierta información recuperada de la base de datos. Revisé tantos recursos como pude pero aún no puedo resolver el problema. Aquí está mi código:
import scimitar from "../../images/scimitar.png"; import defender from "../../images/defender.png"; import arrows from "../../images/arrows.png"; import cape from "../../images/cape.png"; import platebody from "../../images/platebody.png"; const ItemCard = ({ item }) => { return ( <div> <p key={item.id}>ID: {item.id}</p> <p>Name: {item.name}</p> <p>{item.examine}</p> <p> <Link to={`/items/${item.id}`}>{item.name}</Link> </p> <img src={require(item.name)} alt={item.examine} /> </div> ) } const ItemList = () => { const [items, setItems] = useState(null); const populateItems = async () => { const data = await getItems(); setItems(data); }; useEffect(() => populateItems(), []); return ( <div> {items && items.map((item, index) => ( <ItemCard item={item} key={index} /> )) } </div> ) }Parece que hay un par de problemas en marcha. Usar literales de plantilla como
<img src={`../../images/${item.name}.png`} alt={item.examine} /> tampoco funcionará. La razón por la que src no toma una ruta a la imagen, mira una URL que usa su sitio web. Deberá configurar su aplicación React para servir imágenes públicas (por ejemplo, asegúrese de que funcione algo como localhost:1337/images/schimitar.png ).
Solo entonces puedes hacer referencia a él usando
<img src={`/images/${item.name}.png` /> Para servir archivos estáticos en create-react-app, consulte este enlace . Si tiene otra configuración, deberá usar algo como babel-plugin-file-loader para servir activos públicos.
<img src={item.name} alt={item.examine} />
No estoy seguro de por qué funcionó, pero coloqué la ruta de la imagen en una variable antes de pasarla a la ruta src de la etiqueta de la imagen.
const ItemCard = ({ item }) => { const imageItem = `/images/${item.name}.png`; return ( <div> <p key={item.id}>ID: {item.id}</p> <p>Name: {item.name}</p> <p>{item.examine}</p> <span>Quantity: {item.quantity}</span> <p> <Link to={`/items/${item.id}`}>{item.name}</Link> </p> <img src={imageItem} alt={item.examine} /> </div> ) } export default ItemCard;