Menu
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?
455
To display an image with the img tag in vue, you can use v-bind:src directive, or :src . Or :src for short. Remember that :src expects a JavaScript expression, so if you want to use a string literal in :src you need to wrap the string in quotes.
The required src attribute specifies the URL of an image. Note: The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.
Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.
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
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
