我正在尝试从数组 object 的这个 for 循环中显示我的图像

Question

我试图让数组对象中的链接在循环通过时显示，但它们显示为断开的链接。 断开的链接代码

<p id= "tracks"> </p>
<div id = "images"> </div>
<script>

let songs = [
  {
    title: "Getting Away with It (All Messed Up)",
    artist: "James",
    album: "Pleased to Meet You",
    year: 2001,
    art: "https://upload.wikimedia.org/wikipedia/en/2/2a/JamesPleasedToMeetYou.jpg"
  },
  {
    title: "Renaissance Affair",
    artist: "Hooverphonic",
    album: "Blue Wonder Power Milk",
    year: 1998,
    art: "https://upload.wikimedia.org/wikipedia/en/1/17/Hooverphonic-Blue_Wonder_Power_Milk.jpg"
  },
  {
    title: "White Nights",
    artist: "Oh Land",
    album: "Oh Land",
    year: 2011,
    art: "https://upload.wikimedia.org/wikipedia/en/6/68/Oh_Land_%28album%29.png"
  }
]
  // Javascript Code here
 element_p = document.getElementById("tracks")
 //alert (element_p.innerHTML); 
 let text = "";

 for (let data of songs) {
  let new_paragraph= document.createElement ('p');
 new_paragraph.innerHTML = 'Title: '+ data.title + " <br> Album: "+ data.album+ ' <br> Artist: ' + data.artist + "<br> Year: "+ data.year
  element_p.appendChild(new_paragraph)
 }
element_div = document.getElementById ("images")
let image = "";

for (let photo of songs){
 let img_node = document.createElement ('IMG');
 img_node.setAttribute('src', "data.art");
 document.getElementById("images").appendChild (img_node);
} 

我究竟做错了什么？ 我尝试了两种不同的方法，这种方法是至少显示损坏链接的唯一方法。 任何帮助或见解表示赞赏。

Answer 1

您必须使用 photo.art 从您传入的每张照片中传入 url 而不是“data.art”

Answer 2

您应该使用img_node.setAttribute('src', photo.art) 。 像下面的例子：

...
for (let photo of songs){
  let img_node = document.createElement ('img');
  img_node.setAttribute('src', photo.art);
  document.getElementById("images").appendChild(img_node);
} 

Answer 3

您将data.art放在引号中，因此将其视为字符串而不是 object。 此外，您的 for 循环正在声明photo ，因此您应该将data.art更改为photo.art 。 像这样：

for (let photo of songs){
  let img_node = document.createElement ('IMG');
  img_node.setAttribute('src', photo.art);
  document.getElementById("images").appendChild (img_node);
}