javascript - img url with vue.js - Stack Overflow

admin管理员组

文章数量:1180476

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?

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?

• javascript
• vue.js

Share Improve this question Follow edited Dec 27, 2016 at 4:36 Saurabh 73.6k4343 gold badges190190 silver badges251251 bronze badges asked Dec 27, 2016 at 4:16 Trung TranTrung Tran 13.7k4848 gold badges124124 silver badges208208 bronze badges 3

• 2 github.com/vuejs/Discussion/issues/202#issuecomment-207979862 – Andy Ray Commented Dec 27, 2016 at 4:22
• Does my answer works? – Jonathan Dion Commented Jun 12, 2017 at 15:04
• 2 v-bind:src="imgURL" – Vivick Commented Jul 24, 2017 at 23:25

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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.

Try this

<img v-bind:src=imgURL>

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

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

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

本文标签： javascriptimg url with vuejsStack Overflow