在原生JavaScript中从Audius API的嵌套JSON数据中提取图片URL

没问题，这很好解决！你已经拿到了包含不同尺寸 artwork 的对象，只需要通过对象的键名直接访问对应的图片 URL 就可以了。

核心思路 #

你看到的track.artwork是一个键值对结构的对象，每个键对应不同尺寸的图片地址。比如你想使用中等尺寸的图，就用track.artwork["480x480"]；如果需要高清图，就用track.artwork["1000x1000"]，完全根据你的布局需求选择即可。

修改后的完整代码 #

我已经帮你调整了app.js里的图片标签部分，同时补充了有意义的alt属性（提升页面可访问性）：

function fetchData() { 
  fetch("https://audius-discovery-4.cultur3stake.com/v1/users/nkd7P/tracks?app_name=unnecessaryroughnessplayer") 
  .then(response => { 
    if(!response.ok) { 
      throw Error("ERROR"); 
    } 
    return response.json(); 
  }).then(tracks => { 
    const html = tracks.data.map(track =>{ 
      // 可选：处理无artwork的情况，避免报错
      const artworkUrl = track.artwork ? track.artwork['480x480'] : '';
      return ` 
      <div class="track"> 
        <div class="track-title"> 
          <a href="https://audius.co${track.permalink}"> 
            <h2> ${track.user.name} <br/> ${track.title} </h2> 
          </a> 
          <img src="${artworkUrl}" alt="Artwork for ${track.title} by ${track.user.name}" />
        </div> 
        <p>Description: ${track.description}</p> 
        <p>Release Date: ${track.release_date}</p> 
        <p>Duration: ${track.duration}</p> 
        <p>Plays: ${track.play_count}</p> 
        <p>Genre: ${track.genre}</p> 
        <p>Mood: ${track.mood}</p> 
        <p>Tags: ${track.tags}</p> 
        <hr> 
      </div> 
      ` ; 
    }).join(''); 
    document.querySelector("#app").insertAdjacentHTML("afterbegin", html); 
  }).catch(error => { 
    console.log(error); 
  }); 
} 
fetchData();

额外提示 #

我加了一个artworkUrl的变量来处理特殊情况：如果某些曲目没有 artwork，代码会给src赋值为空字符串，避免页面出现加载错误的图标。你也可以把空字符串换成你的默认图片地址，让页面更美观。

内容的提问来源于stack exchange，提问作者teamallnighter