I am trying to get my image to display from this for loop from the array object-CodePudding

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_(album).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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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