Traté de mostrar una imagen de la carpeta de imágenes en la matriz JSON a Javascript, pero no estoy seguro de si estoy obteniendo el camino correcto. Cuando ocurre el evento de clic, todo funciona, excepto que la imagen no se muestra en <img id "imagen">, la imagen no se muestra en la sección img de mi HTML.

Intenté cambiar la ruta a ../Images/room_1.jpg pero aún no funciona.

FYI: tengo una carpeta separada que almacena imágenes, tanto json como js se almacenan en la carpeta javascript. ¿Debo poner el mismo archivo de imagen en la carpeta javascript?

html

 <h2>Select a Hotel</h2> <ul class ="hotels"> <li><a href="#" id="marriott"> Marriott Hotel Rooms</a></li> </ul> <h2 id="hotelName">Hotel</h2> <h3>Adress: <span id="address"></span></h3> <img id="picture">

Hotel.json

 { "hotels": [ { "name": "Marriott", "address": "098 hollywood Street", "picture": "room_1.jpg" }

JS

 async function getHotelData() { try { const response = await fetch('Javascript//hotel.json') return await response.json() } catch (error) { console.error(error) } } let hotelData = {} getHotelData().then(data => hotelData = data) const hotelEvent = document.querySelectorAll("a").forEach(a => { a.addEventListener('click', hotelInfo ) }) function hotelInfo(event) { let hotelChoice = hotelData.hotels.find(hotel => { return event.target.id === hotel.name.toLowerCase() return event.target.id === hotel.address.toLowerCase() return event.target.id === hotel.picture.toLowerCase() }) console.log(hotelChoice) document.querySelector("#hotelName").textContent = `${hotelChoice.name} Hotel` document.querySelector("#address").textContent = `${hotelChoice.address}` document.querySelector("#picture").innerHTML = `${hotelChoice.picture}` }