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

72
votes

I have this in my vue.js template:

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

It is inside a loop that renders jokes. Other 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?

1
javascriptvue.js
Post your v-bind:src attempt – yuriy636
Even though it's marked as duplicate but still this is the one that comes up in search when you search "vuejs image src" but instead to get to duplicate you will have to search "How to solve Interpolation inside attributes has been removed......" Not helpful in my opinion, closing this question and marking it as duplicate doesn't make sense at all. – user606669

1 Answers

148
votes

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