使用 JavaScript 显示来自 JSON 数组的图像

Question

我试图将 JSON 数组中图像文件夹中的图像显示到 Javascript，但我不确定我是否获得了正确的路径。当点击事件发生时，除了图像没有显示在中之外，一切正常，图片没有显示在我 HTML.

的 img 部分

我尝试将路径更改为../Images/room_1.jpg，但仍然无法正常工作。

仅供参考：我有一个单独的文件夹来存储图像，json 和 js 都存储在 javascript 文件夹中。我应该将相同的图像文件放在 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}`



}

Answer 1

您需要为图像设置 src property 而不是设置其 innerHTML。

一个普通的 img 标签看起来像这样：

<img id="image" src="/path/to/image.png">

您需要使用 JavaScript:

复制相同内容

document.querySelector("#picture").innerHTML = `${hotelChoice.picture}`
// Becomes
document.querySelector("#picture").src = `${hotelChoice.picture}`

此外，请注意 JSON 文件中的图像路径，它应该与您正在使用的 HTML 文件相关，而不是 JavaScript 文件。因此，如果您的图像存储在单独的目录中，您应该相应地更改 JSON 文件中的路径。

示例：如果你的 HTML 文件在项目根目录中并且有一个 images 文件夹，你 JSON 应该是这样的：

{
  "hotels": [
    {
      "name": "Something",
      "address": "Some Street, 12",
      "picture": "images/picture_name.jpg"
    }
  ]
}

使用 JavaScript 显示来自 JSON 数组的图像

Display Images from JSON Array using JavaScript

javascript

jquery

json

image

filepath