I am trying to add 4 images on my site however the images are not loading. I can see 4 images in the inspector tool, however they are not showing up.
This is my code in JS:
function createZooland(zoolandData) {
let content = document.getElementById("content");
let h2 = document.createElement("h2");
let h3 = document.createElement("h3");
let blockquote = document.createElement("blockquote");
let img = document.createElement("img");
h2.innerHTML = `${zoolandData[0].common_name}`;
content.appendChild(h2);
h3.innerHTML = `${zoolandData[0].scientific_name}`;
content.appendChild(h3);
blockquote.innerHTML = `${zoolandData[0].description}`;
content.appendChild(blockquote);
for(let i = 0; i < zoolandData.length; i++){
for(let j = 0; j < zoolandData[i].images["image"].length; j++){
img.src = "images/" + `${zoolandData[0].images.image}`;
content.appendChild(img);
}
}
}
and this is the JSON it’s referencing:
{
"common_name": "Koala",
"scientific_name": "Phascolarctos cinereus",
"description": "Koalas are well-known...",
"images": {
"image": [
"koala1.jpg",
"koala2.jpg",
"koala3.jpg",
"koala4.jpg"
]
}
},
Please let me know if any additional information is needed. I’m not sure how to get the images to display.