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

Posted 2023-02-14

【中文标题】我正在尝试从数组对象的这个 for 循环中显示我的图像

【英文标题】：I am trying to get my image to display from this for loop from the array object

【发布时间】：2022-01-20 02:38:03

【问题描述】：

我试图让数组对象中的链接在循环通过时显示，但它们显示为断开的链接。 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);
 

我做错了什么？我尝试了两种不同的方法，这种方法是至少显示断开链接的唯一方法。感谢您提供任何帮助或见解。

【问题讨论】：

请在问题中包含您的代码

抱歉刚刚添加了它

@JenniferGarcia in this img_node.setAttribute('src', "data.art");我猜 data.art 不应该用引号引起来？

【参考方案1】：

您应该使用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);
 

【讨论】：

你为什么接受这个答案？代码被破坏了。它声明let photo，然后访问data.art。

也可以使用IMG。大小写无关紧要。

【参考方案2】：

data.art 在引号中，因此它被视为字符串而不是对象。此外，您的 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);
 

【讨论】：

不客气，但你接受了错误的答案:(

let 似乎是一个 js 对象数组，所以 src "value" 应该是 let[index].art

“data.art”也不应该有引号，除非你使用 eval("data.art") 它应该是 let[index].art eval("let[index].art")

塞缪尔，您在评论错误的答案。另外，songs 是一个数组，let photo 代表数组中的每个对象。因此，您可以使用photo.art 访问艺术作品。引号中没有任何内容。

【参考方案3】：

您必须使用 photo.art 传入每张照片的网址，而不是“data.art”