如何在 vuejs/vuetify 中显示路径在 json fake server 中的图像？答案

【问题标题】：How to display an image in vuejs/vuetify whose path is in json fake server?如何在 vuejs/vuetify 中显示路径在 json fake server 中的图像？
【发布时间】：2020-03-25 08:29:24
【问题描述】：

如何显示路径在 json 假服务器中的图像？ json文件中的数据如下：

"packages": [
{
...
    "images": [
        "https://i.ibb.co/g7FWSYv/a.jpg", 
        "https://i.ibb.co/hX3xQ5K/b.jpg", 
        "https://i.ibb.co/68TdBNs/c.jpg"
      ],
...
},
]

我正在使用 v-for 循环来显示数据

<v-col v-for="(package, index) in packages" :key="index">
    <v-img :src="package.images[0]" ></v-img>
</v-col>

这是我的 javascript：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

export default {
    data () {
        return {
            packages: [],
        }
    },
    created () {
      this.initialize()
    },
    methods: {
        initialize () {
            axios.get('http://localhost:4000/packages', {})
            .then(response => { 
                this.packages = response.data
            })
        }
    }
}

但是图像没有显示出来。我在控制台中收到错误：

TypeError: Cannot read property '0' of undefined

response.data 是正确的。它显示了具有 3 个元素的图像数组。

谁能帮帮我？

我稍微改变了我的json：

 "images": [
    { "src": "https://i.ibb.co/g7FWSYv/a.jpg"}, 
    { "src": "https://i.ibb.co/hX3xQ5K/b.jpg" }, 
    { "src": "https://i.ibb.co/68TdBNs/c.jpg"}
  ],

并将代码更改为：

<v-img :src="package.images[0].src"></v-img>

我仍然在 console.log() 中遇到同样的错误

【问题讨论】：

response.data 正确吗？ c 的价值是什么（顺便说一句，你真的应该给它一个更有意义的名字......）？如果您想得到答案，请提供必要的信息。
你好皮埃尔，我认为 response.data 是正确的。我已经编辑了我的问题。
这可能是由于模板在initialise() 解析之前被渲染。尝试向v-img 添加条件，例如<v-img v-if="package && package.images" :src="package.images[0]" ></v-img>。

标签： arrays json vue.js vuetify.js

【解决方案1】：

这取决于response.data 的数据结构，如果它是包含images 字段作为图像链接数组的对象数组，那么您的代码应该可以工作。如果response.data 是包含images 数组的单个对象（我假设），那么TypeError: Cannot read property '0' of undefined 将上升，在这种情况下，您不需要循环来显示您的 0 索引图像，只需

<v-img v-if="packages.images" :src="packages.images[0]" ></v-img>

【讨论】：