Попытка получить доступ к массиву изображений из моего JSON файла в мой JS код

Question

Файл

my 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);
        }
}

, почему мои изображения не отображаются?

Answer 1

Попробуйте

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>

Answer 2

Вы установили внутреннее свойство HTML на img, это неправильно, попробуйте ввести имя изображения в атрибут .sr c.

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