尝试从我的 JSON 文件访问一组图像到我的 JS 代码

Posted 2023-02-22

【中文标题】尝试从我的 JSON 文件访问一组图像到我的 JS 代码

【英文标题】：Trying to access an array of images from my JSON file to my JS code

【发布时间】：2020-07-29 01:04:09

【问题描述】：

我的 JSON 文件如下所示：

[
    
            "destination": "Hawaii",
            "description": "...etc, etc",
            "images": 
                "image": [
                    "hawaii1.jpg",
                    "hawaii2.jpg",
                    "hawaii3.jpg",
                    "hawaii4.jpg"
                ]
            
        , 
    ***more destinations continuing on***

我将图像放在一个文件夹中，但 html 显示为空白，仅显示边框。 这是我的 javascript 代码：

function createTrip(tripData) 
    let ul = document.getElementsByTagName("ul")[0];

    for(let i = 0; i < tripData.length; i++)

        let keys = Object.keys(tripData[i]);
        let values = Object.values(tripData[i]);

       **** code appending my data into a li element****

        for (let j = 0; j < values.length; j++) 

            let label = document.createElement("label");
            let span = document.createElement("span");
            let img = document.createElement("img");

            label.innerHTML = `$keys[j]:`;
            span.innerHTML = `$values[j]`;

            img.innerHTML = `$tripData[i].images.image[0]`;

            li.appendChild(img);
            ul.appendChild(li);
        

为什么我的图片没有显示？

【参考方案1】：

你将innerHTML属性设置为img，错了，试试把图片名放在.src属性中。

... code ...
img.src = `$tripData[i].images.image[0]`;
... code ...

【参考方案2】：

试试

d = [
  
    "destination": "Hawaii",
    "description": "...etc, etc",
    "images": 
      "image": [
        "hawaii1.jpg",
        "hawaii2.jpg",
        "hawaii3.jpg",
        "hawaii4.jpg"
      ]
    
  ,
  //...
]

s = '';

d.map(trip => 
  trip.images.image.map(img => 
    s += `
      <li>
        <label>$trip.destination</label>
        <img src=$img/>
        <span>$trip.description</span>
      </li>`;
  )
)

trips.innerHTML = s;

<ul id="trips"></ul>