Question

我有一个看起来像这样的json：

    {
    "books": [
        {
            "name": "Lord of the rings",
            "author": 1,
            "year": 1937,
            "genre": 3,
            "imageUrl": "https://cdn.lifehack.org/wp-content/uploads/2015/03/9780618640157_custom-s6-c30.jpg",
            "availability": true
        }
}

我正在尝试显示如下图像：问题在于该图像未显示，因为URL类似于此localhost：8080 / https：//....。我的代码如下：

<tr v-for="item in items.books" :key="item.name">
   <td>{{item.name}}</td>
   <td>{{item.author}}</td>
   <td>{{item.genre}}</td>
   <td><img :src="'{{'+item.imageUrl+'}}'"></td>
   <td>{{item.svailability}}</td>
</tr>

有什么想法吗？

Answer 1

正确的方法：<img :src="item.imageUrl">

Answer 2

请问您可以通过一些前端代码进行更多说明吗，因为它并没有显示任何内容

更新：

从括号{{'+item.imageUrl+'}}中删除+，例如{{item.imageUrl}} 您在src中有一个：尝试<img src="{{item.imageUrl}}"

在VUE中显示图片，该图片托管在https上

2 个答案: