How to use img src in vue.js? [duplicate]

Question

This question already has an answer here:

• How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2 2 answers

I have this in my vue.js template:

<img src="/media/avatars/{{joke.avatar}}" alt="">   

It is inside a loop that renders jokes. Otehr fields are rendered fine, but for the image I get this error in the console:

• src="/media/avatars/{{joke.avatar}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

I have also use v-bind:src="... but get invalid expression error.

How can I fix this?

Answer 1

Try this:

<img v-bind:src="'/media/avatars/' + joke.avatar" /> 

Don't forget single quote around your path string. also in your data check you have correctly defined image variable.

joke: {
  avatar: 'image.jpg'
}

A working demo here: http://jsbin.com/pivecunode/1/edit?html,js,output