How Can I Use 'Img Src' in Vue. Js? [Duplicate]

Name: How Can I Use 'Img Src' in Vue. Js? [Duplicate]
Uploaded: 2026-09-30T19:00:24+00:00
Duration: 20 min 47 s
Description: I Have This in My Vue. Js Template: It Is Inside a Loop That Renders Jokes. Other Fields Are Rendered Fine, but for the Image I Get This Error in the Console...

Question

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?

Accepted Answer

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:

How Can I Use 'Img Src' in Vue. Js? [Duplicate]

Must Read

1 Answer

David Miller