img url with vue.js

Question

Can someone help me with using the img tag with vue.js?

Per the vue.js documentation, I tried:

<img v-bind:src={{ imgURL }}> //prints a null image

Here is my jsfiddle

Can someone help?

github.com/vuejs/Discussion/issues/202#issuecomment-207979862 — Andy Ray
– Andy Ray, Commented Dec 27, 2016 at 4:22

Kapil Chhabra · Accepted Answer · 2021-09-30 14:22:35Z

21

You need to remove the double bracket:

<img :src=imgURL>

You bind it with shorthand syntax, so we don't need 'v-bind' or '{{}}' braces, its beauty of VUE JS, ':' is used to bind.

edited Sep 30, 2021 at 14:22

Kapil Chhabra

4135 silver badges7 bronze badges

answered Apr 23, 2017 at 16:22

Jonathan Dion

1,67011 silver badges18 bronze badges

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

Comments

Sujithrao · Accepted Answer · 2016-12-27 04:19:34Z

7

Try this

<img v-bind:src=imgURL>

answered Dec 27, 2016 at 4:19

Sujithrao

7853 gold badges12 silver badges27 bronze badges

Comments

Mick · Accepted Answer · 2017-07-25 04:34:54Z

4

Above answers are both right but it doesn't really explains why the OP's making a mistake.

When you are using double brackets you are telling vue to do v-bind: so when you write v-bind and also use double brackets then you are double calling the same thus generating a mistaken behavior.

Short words: either use v-bind or double brackets {{ }}

edited Jul 25, 2017 at 4:34

Mick

6,9144 gold badges55 silver badges72 bronze badges

answered Jul 24, 2017 at 23:18

Andres Rocha

491 bronze badge

Comments

Muhammad Omer Aslam · Accepted Answer · 2017-12-04 00:38:40Z

0

Maybe you try to print an image from image binary code,

<img v-bind:src="'data:image/Bmp;base64,' + obj1.Obj2.propImage" />

edited Dec 4, 2017 at 0:38

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

answered Dec 3, 2017 at 16:53

Lucaseto

512 bronze badges

Collectives™ on Stack Overflow

img url with vue.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related