如何从Vue中的json数组绑定url图像src答案

【问题标题】：How to bind url image src from json array in Vue如何从Vue中的json数组绑定url图像src
【发布时间】：2021-06-04 20:57:40
【问题描述】：

我有这样的json

{
  "_id": "603aaab9dead94fee94d280e",
  "store_id": "6031a1bde94a31fcbd6af4e5",
  "store_name": "maria",
  "name": "alpokal",
  "description": "test buah mangga",
  "unit": "kilogram",
  "price": 15000,
  "fprice": "Rp 15,000",
  "quantity": 1,
  "image": [
    {
      "_id": "603aaabadead94fee94d2810",
      "filename": "https://storage.googleapis.com/jsimage/1614457529947-867187617.jpg"
    }
  ]
}

这是我的Vue模板，但是<img>src有错误

<template>
    <div>
    <div class="row">
        <div v-for="item in productAll" :key="item._id" class="col-md-3 col-xs-6">
            <div class="card">
            <img v-bind:src={{"item.image.[0].filename"}} />
            <div class="card-body">
                <h5 class="card-title">{{item.name}}</h5>
                <p>{{item.description}}</p>
                <p>{{item.unit}}</p>
                <p>{{item.fprice}}</p>
                <p>{{item.quantity}}</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            </div>
        </div>
    </div>
    </div>
</template>

结果不是图像，而是文本谢谢你

【问题讨论】：

试试这个

标签： javascript json image vue.js vue-component

【解决方案1】：

将您的图像更改为：

 <img v-bind:src="item.image[0].filename" />

【讨论】：

【解决方案2】：

去掉<img>标签src属性绑定中的插值大括号：

<img v-bind:src="item.image[0].filename" />

属性表达式中不使用插值。你还有一个额外的.在这里：

image.[0]

按索引访问数组项时，不要使用点。

【讨论】：