Estoy dando mis primeros pasos en React y haciendo mi primera página. Parseo información mediante JSON dentro de un componente, y me lee todo el array sin problemas excepto las imágenes. ¿Hay algo en mi código que estoy haciendo mal? ¿Tengo que descargar algo más? Desde ya, gracias.
DatosHamburguesas.json:
[
{
"id":1,
"name": "Medallones de Soja y Calabaza Veggieland",
"desc": "4 unidades de hamburguesas congeladas a base de trigo y mandioca con calabaza. Precocido, sin colesterol y vegano.",
"precio":300,
"img":"hamburguesa1.jpg",
"alt": "Medallones de Soja y Calabaza Veggieland"
}
]
Componente DatosHamburguesas.js:
import React, { Component } from "react";
import ListaHamburguesas from "./DatosHamburguesas.json";
class Listado extends Component {
render() {
return (
<div>
{ListaHamburguesas.Listado.map((elemento, i) => {
return (
<div key={i}>
<h5>{elemento.name}</h5>
<img src={elemento.img} alt={elemento.alt}/>
<span>{elemento.desc}</span>
<p>{elemento.precio}</p>
</div>
);
})}
</div>
);
}
}
export default Listado;
ListaHamburguesas
sólo mandas el nombre del fichero. Tienes que añadir la ruta entera de la ubicación de la imagensrc={"x/y/" +element.img}
. O mandar la ruta entera en el mismo json