Javascript 如何在Vue中从json数组绑定url图像src

我有一个像这样的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模板，但

<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>


{{item.name}
{{item.description}

{{item.unit}

{{item.fprice}}

{{item.quantity}


结果不是图像，而是文本
谢谢
删除
属性绑定中的内插括号：



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

image.[0]

按索引访问数组项时，不要使用点。
将图像更改为：

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

试试这个