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

Question

I am trying to get the links in the array objects to display when the loop goes through but they appear as broken links. broken link code

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

What am I doing wrong? I tried two different ways and this way is the only way at least the broken links show up. Any help or insight is appreciated.

Answer 1

Instead of 'data.art' you have to pass in the url from each photo you are passing in by using photo.art

Answer 2

You should use img_node.setAttribute('src', photo.art) . like below example:

...
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

You have data.art in quotes so its treated as a string instead of an object. Also, your for loop is declaring photo so you should change data.art to photo.art . Like this:

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