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
.
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>
)
}