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

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

Parth Shah
– Parth Shah

2021-03-06 11:22:39 +00:00
Commented Mar 6, 2021 at 11:22 — Parth Shah
– Parth Shah, Commented Mar 6, 2021 at 11:22

Dan · Accepted Answer · 2021-03-06 11:22:50Z

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.

answered Mar 6, 2021 at 11:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ratracegrad · Accepted Answer · 2021-03-06 15:56:59Z

0

Change your image to be:

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

answered Mar 6, 2021 at 15:56

ratracegrad

844 bronze badges

Collectives™ on Stack Overflow

How to bind url image src from json array in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related