使用 Vue 从 JSON 对象中提取除第一个图像之外的其他图像

Posted 2023-02-16

【中文标题】使用 Vue 从 JSON 对象中提取除第一个图像之外的其他图像

【英文标题】：Pulling other images except first from JSON object with Vue

【发布时间】：2020-11-17 04:25:54

【问题描述】：

我正在尝试使用 Vue.js 在 JSON 对象中获取第二个图像 url。我可以通过指定<img :src="item.images[0].url" /> 来获取第一个图像src url。所以，从逻辑上讲，我认为<img :src="item.images[1].url" /> 会得到第二张图片 (300x300) 的变化。没有。

（更新）我刚刚意识到我需要v-if，因为并非所有播放列表都具有 300x300 的图像大小。

如果有images[1].url 或者images[0].url，我该怎么写？

我的 for 循环：

<div v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index"> 

这是我的查询返回的内容：

  "data": 
    "spotify": 
      "me": 
        "id": "me",
        "playlists": [
          
            "id": "5EpTRIeVs55Hl1g7NY53v1",
            "name": "Euphrate",
            "images": [
              
                "url": "https://mosaic.scdn.co/640/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 640,
                "width": 640
              ,
              
                "url": "https://mosaic.scdn.co/300/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 300,
                "width": 300
              ,
              
                "url": "https://mosaic.scdn.co/60/ab67616d0000b27320a15cbf156f65c94ef6a506ab67616d0000b27365db2b50dcd76741d9fa12a5ab67616d0000b27377d36619ec51d9f76bb1ffcfab67616d0000b2739d24c92c3d3837eb9366cb79",
                "height": 60,
                "width": 60
              
            ],
…

【参考方案1】：

根据您分享的代码，如果<img :src="item.images[0].url" /> 有效，那么<img :src="item.images[1].url" /> 也应该有效。

最有可能发生的事情是，您的 json 中的 playlists 之一只有一个图像，这会导致您的代码在您尝试访问第二个图像时出错。

要解决此问题，您可以添加v-if，如下所示：

<img :src="item.images[1].url" v-if="item.images.length > 1" />

【讨论】：

是的，它出错了，因为其中一张较小的图像不存在，但错误不够具体。我想出了一种业余的写法：<img v-if="item.images[1]" :src="item.images[1].url" /> <img v-else :src="item.images[0].url" />。我想说如果存在第二张图像，请使用它，否则使用第一张图像。但是，可能有更有效的方法。

你可以试试<img :src="(item.images[1] || item.images[0]).url" />

那就更好了。谢谢@shoejep