97

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 I get invalid expression error.

How can I fix this?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Karlom
  • 13,323
  • 27
  • 72
  • 116
  • 1
    Post your `v-bind:src` attempt – yuriy636 Aug 25 '17 at 12:18
  • 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 Feb 17 '21 at 10:15

1 Answers1

190

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 a correctly defined image variable.

joke: {
  avatar: 'image.jpg'
}

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Badis Merabet
  • 13,970
  • 9
  • 40
  • 55
  • 18
    Vue 2+ & babel/webpack: – Nick Steele Aug 28 '18 at 19:20
  • 12
    Easiest solution: create a variable with the full src and then `` – Giorgio Tempesta Jun 11 '19 at 07:55
  • 1
    Perfect solution for me! Double quotes and single quote trick helped me a lot. – Mycodingproject Jun 18 '20 at 12:34
  • https://stackoverflow.com/questions/37645243/static-image-src-in-vue-js-template – Ravi Anand Jan 24 '21 at 16:51
  • Without including v-bind, it should still work well i.e Using require('url') worked for me, with images on local, if you set in a data function that returns an array of objects like so data() { return { jokes: [ { word: 'some good joke', avatar: require('../assets/images/host/IMG_20191125_160548.jpg'), }, ....... ] } – Okiemute Gold Apr 13 '21 at 22:18
  • 1. `:src` is the same as `v-bind:src` 2. You can not easily use a property if you are inside a v-for and are using the local for variable, `v-bind:src` worked in that case. – Binarian Aug 27 '21 at 06:02