2

Estoy creando una aplicación React que muestre diferentes viajes realizados, para ello estoy renderizando los detalles de cada viaje junto con imágenes de cada lugar, a través de props, imágenes que tengo en una carpeta images en src.

introducir la descripción de la imagen aquí

No logro que las imágenes se muestren para cada una de las instancias del componente que estoy renderizando del archivo local data.js donde tengo los datos que necesito mostrar.

Los demás datos que renderizo sí se muestran, solo me faltan las imágenes.

Quisiera saber que error estoy cometiendo. Adjunto el código.

import './App.css';
import Travel from "./components/Travel";
import data from "./data";

function App() {
  const travels = data.map(travel => {
    return ( <
      Travel key = {
        travel.id
      }
      image = {
        travel.imageUrl
      }
      location = {
        travel.location
      }
      url = {
        travel.googleMapsUrl
      }
      title = {
        travel.title
      }
      startDate = {
        travel.startDate
      }
      endDate = {
        travel.endDate
      }
      description = {
        travel.description
      }
      />
    )
  })

  return ( <
    div className = "App" > {
      travels
    } <
    /div>
  );
}

export default App;

Aquí el archivo data.js donde se almacenan los datos de los travels

const data = [{
    id: 1,
    title: "Mount Fuji",
    location: "Japan",
    googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
    startDate: "12 Jan, 2021",
    endDate: "24 Jan, 2021",
    description: "Mount Fuji is the tallest mountain in Japan, standing at 3,776 meters (12,380 feets). Mount Fuji is the single most popular tourist site in Japan, for both Japanese and foreign tourists.",
    imageUrl: "mount_fuji.jpeg",
  },
  {
    id: 2,
    title: "Sydney Opera House",
    location: "Australia",
    googleMapsUrl: "https://www.google.com/maps/dir//-33.85691,151.215262/@-33.8567646,151.1452566,12z",
    startDate: "27 May, 2021",
    endDate: "8 Jun, 2021",
    description: "The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the banks of the Sydney Harbour, it is often regarded as one of the 20th century's most famous and distinctive buildings.",
    imageUrl: "sydney_opera_house.jpeg",
  },
  {
    id: 3,
    title: "Geirangerfjord",
    location: "Norway",
    googleMapsUrl: "https://www.google.com/maps/dir//62.09137700000001,7.061933",
    startDate: "01 Oct, 2021",
    endDate: "18 Nov, 2021",
    description: "The Geiranger Fjord is a fjord in the Sunnmore region of More og Romsdal county, Norway. It is located entirely in the Stranda Municipality",
    imageUrl: "geirangerfjord.jpeg",
  }
]

export default data;

Aquí el componente Travel que debe renderizar los datos de los viajes almacenados en data.js

import React from "react";

export default function Travel(props) {
  
    return (
       <div>
            <img src= {`../images/${props.imageUrl}`} alt="landscape" />
            <div>
                <span>{props.location}</span>
                <span>{props.googleMapsUrl}</span>
                <h5>{props.title}</h5>
                <span><b>{props.startDate}</b><b>{props.endDate}</b></span>
                <p>{props.description}</p>
            </div>
       </div>
    )
}

introducir la descripción de la imagen aquí

7
  • 1
    ¿Te aparece algún error en la consola del navegador? Commented el 5 feb. 2023 a las 20:29
  • Abre la consola de tu navegador y ve a la pestaña Network/Red si las imágenes no se muestran es probable que la ruta no sea correcta. Revisa si estás obteniendo algún tipo de error como 404 (Not Found) Commented el 6 feb. 2023 a las 14:57
  • @PabloLozano no, no estoy recibiendo ningún error en la consola del navegador, solo una advertencia: URI no válida. Ha fallado la carga del recurso de medios .
    – Daniel
    Commented el 6 feb. 2023 a las 16:47
  • @AndresGardiol en la pestaña Network/Red no estoy obteniendo ningún error 404 (Not Found), sin embargo sí estoy obteniendo un estado 304 (Not Modified), donde dice que el archivo es undefined
    – Daniel
    Commented el 6 feb. 2023 a las 17:48
  • te recomiendo que agregues un ejemplo mínimo verificable Commented el 6 feb. 2023 a las 18:23

1 respuesta 1

2

El fallo está en el nombre de la propiedad: En el componente App defines lo siguiente:

function App() {
  const travels = data.map(travel => {
    return ( <
      Travel key = {
        travel.id
      }
      image = { // <---- props.image
        travel.imageUrl
      }

      ...

      />
    )
  })

Pero luego en el componente Travel tienes props.imageUrl, que como no está definido es undefined.

export default function Travel(props) {
  
    return (
       <div>
            <img src= {`../images/${props.imageUrl}`} alt="landscape" />
            <div>
                ...
            </div>
       </div>
    )
}
1
  • Exactamente como usted dice Pablo, mi error estaba en que había colocado props.imageUrl en lugar de props.image en el componente Travel, ya lo he cambiado y funciona perfectamente. Muchas gracias !!
    – Daniel
    Commented el 8 feb. 2023 a las 5:49

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.