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

Posted 2023-02-22

【中文标题】如何在 vuejs/vuetify 中显示路径在 json fake server 中的图像？

【英文标题】：How to display an image in vuejs/vuetify whose path is in 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>。

【参考方案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>