Блог

Я пытаюсь добавить 4 изображения на свой сайт, однако изображения не загружаются. Я вижу 4 изображения в инструменте инспектора, однако они не отображаются.

Это мой код на 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 lt; zoolandData.length; i  ){  for(let j = 0; j lt; zoolandData[i].images["image"].length; j  ){  img.src = "images/"   `${zoolandData[0].images.image}`;     content.appendChild(img);  } }  

}

и это JSON, на который он ссылается:

 {  "common_name": "Koala",  "scientific_name": "Phascolarctos cinereus",  "description": "Koalas are well-known...",  "images": {  "image": [  "koala1.jpg",  "koala2.jpg",  "koala3.jpg",  "koala4.jpg"  ]  }  },  

Пожалуйста, дайте мне знать, если потребуется какая-либо дополнительная информация. Я не уверен, как заставить изображения отображаться.

Вам нужно двигаться img = document.createElement("img"); внутри цикла

Или просто сделай это

 const zoolandData = [{ "common_name": "Koala", "scientific_name": "Phascolarctos cinereus", "description": "Koalas are well-known...", "images": { "image": [ "koala1.jpg", "koala2.jpg", "koala3.jpg", "koala4.jpg" ] } }, { "common_name": "Dwarf wallaby", "scientific_name": "Notamacropus dorcopsulus", "description": "Native to New Guinea, it is the smallest known wallaby species ...", "images": { "image": [ "wallaby1.jpg", "wallaby2.jpg", "wallaby3.jpg", "wallaby4.jpg" ] } } ];  content.innerHTML  = zoolandData  .map(entry =gt; `lt;h2gt;${entry.common_name}lt;/h2gt;  lt;h3gt;${entry.scientific_name}lt;/h3gt;  lt;blockquotegt;${entry.description}lt;/blockquotegt;  ${entry.images.image  .map(src =gt; `lt;img src="images/${src}" alt="${src}" /gt;`).join("")}`  ).join("") 

 lt;div id="content"gt;lt;/divgt;