1

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

7
  • Hola! Bienvenidx a SOes. Por favor, compártenos el código como texto. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    Commented el 12 nov. 2020 a las 21:51
  • Hola @Alfabravo gracias por contestar, ahí edité la pregunta. Commented el 12 nov. 2020 a las 22:12
  • Tienes que poner la ruta absoluta de la imagen. Es decir, actualmente en el json ListaHamburguesas sólo mandas el nombre del fichero. Tienes que añadir la ruta entera de la ubicación de la imagen src={"x/y/" +element.img}. O mandar la ruta entera en el mismo json
    – hawks
    Commented el 12 nov. 2020 a las 22:38
  • Verifica la ruta donde tienes guardadas las imágenes, que sea la misma que la que te entrega el json Commented el 12 nov. 2020 a las 22:54
  • @hawks lo que sucede es que tengo varios elementos dentro del array, el que puse arriba es un ejemplo. Respondiendo al comentario de Alter Lagos, las imágenes están en la misma carpeta donde tengo el JSON y el .js, por eso me parece raro que no me reconozca la ruta. Commented el 12 nov. 2020 a las 23:36

2 respuestas 2

0

Tienes que almacenar tus imágenes en la carpeta public de tu proyecto (puedes añadir directorios aquí para no sobrecargarla) ya que no son accesibles de la forma en que lo estás haciendo. Para acceder a ellas simplemente usa la barra / antes de la ruta a la imagen.

Por ejemplo:

<img src={`/dir1/dir2/${elemento.img}`} alt='...' />

Donde dir1 y dir2 son posibles subdirectorios dentro de public (no hace falta especificar el nombre del directorio public como verás en el ejemplo).

Otra solución sería importar las imágenes en el componente donde las vayas a usar, pero al ser dinámicas yo prefiero hacerlo como te explico arriba.

1
  • Me solucionó el problema, te agradezco mucho! Commented el 15 nov. 2020 a las 0:42
0

Lo mas recomendado es guardar las imagenes en /public pero si deseas guardarlas en /src puedes renderizar las imagenes de la siguiente manera

<img src={require(elemento.img)} alt={elemento.alt} />
1
  • Hola! Sí, me dijeron lo mismo, al final lo resolví guardándolo en /public. Gracias! Commented el 15 nov. 2020 a las 0:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.