How to bind url image src from json array in Vue

Question

I have json like this

{
  "_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"
    }
  ]
}

This is my Vue template, but there is error on <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>

the result is not image, but only text thank you

Answer 1

Remove the interpolation braces in the <img> tag src attribute binding:

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

Interpolations aren't used in attribute expressions. You also had an extra . here:

image.[0]

When accessing an array item by index, you don't use a dot.

Answer 2

Change your image to be:

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