Skip to main content
Agregué mi código escrito y mejoré mi redacción. :)
Origen Enlace

Estoy dando mis primeros pasos en React y estoy codeandohaciendo mi primera página. Estoy parseandoParseo información mediante JSON dentro de un componente, y me lee toda la infotodo 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. [Este es el JSON [Este el código dentro del componente .js2

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;

Esto es lo que me muestra la página, la imagen está rota

Estoy dando mis primeros pasos en React y estoy codeando mi primera página. Estoy parseando información mediante JSON dentro de un componente, y me lee toda la info excepto las imágenes. ¿Hay algo en mi código que estoy haciendo mal? ¿Tengo que descargar algo más? Desde ya, gracias. [Este es el JSON [Este el código dentro del componente .js2 Esto es lo que me muestra la página, la imagen está rota

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;

Esto es lo que me muestra la página, la imagen está rota

Origen Enlace

No puedo parsear imágenes mediante JSON

Estoy dando mis primeros pasos en React y estoy codeando mi primera página. Estoy parseando información mediante JSON dentro de un componente, y me lee toda la info excepto las imágenes. ¿Hay algo en mi código que estoy haciendo mal? ¿Tengo que descargar algo más? Desde ya, gracias. [Este es el JSON [Este el código dentro del componente .js2 Esto es lo que me muestra la página, la imagen está rota