Estoy tratando de hacer que los enlaces en los objetos de la matriz se muestren cuando se realiza el bucle, pero aparecen como enlaces rotos. código de enlace roto
<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); }¿Qué estoy haciendo mal? Intenté dos formas diferentes y esta es la única forma en que al menos aparecen los enlaces rotos. Cualquier ayuda o idea es apreciada.
En lugar de 'data.art', debe pasar la URL de cada foto que está pasando usando photo.art
Debe usar img_node.setAttribute('src', photo.art) . como el siguiente ejemplo:
... for (let photo of songs){ let img_node = document.createElement ('img'); img_node.setAttribute('src', photo.art); document.getElementById("images").appendChild(img_node); }Tiene data.art entre comillas, por lo que se trata como una cadena en lugar de un objeto. Además, su ciclo for está declarando photo , por lo que debe cambiar data.art a photo.art . Como esto:
for (let photo of songs){ let img_node = document.createElement ('IMG'); img_node.setAttribute('src', photo.art); document.getElementById("images").appendChild (img_node); }