Working with the img HTML Tag in Vue
source link: https://masteringjs.io/tutorials/vue/img-tag
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Working with the img HTML Tag in Vue
To display an image with the img
tag in vue, you can usev-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.
Below is an example of using :src
to display images two different ways: a raw string literal, or a variable in data
.
const app = new Vue({
data: function() {
return {
link: '../../assets/logo.png'
};
},
template: `
<div>
<div style="width: 50%">
<img :src="'../../assets/logo.png'" />
</div>
<div style="width: 50%">
<img :src="link" />
</div>
</div>
`,
});
Below is a live example.
Computed src
You can also pass a computed property to :src
.
Just make sure the computed property returns the
const example = new Vue({
template: `
<div style="width: 50%">
<img :src="photo" />
</div>
`,
computed: {
photo() {
return '../../assets/logo.png';
}
}
});
Class src
You can set conditional classes on an image using v-bind:class
, or :class
for short.
const decor = new Vue({
data: () => ({
active: false
}),
template: `
<div style="width: 50%">
<img :class="imageClass" :src="photo" />
</div>
`,
computed: {
photo() {
return '../../assets/logo.png';
},
imageClass() {
return { active: this.active };
}
},
mounted() {
this.active = true;
}
});
Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!
More Vue Tutorials
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK