Vue.js Change Image src
Sometimes we need to change the image url dynamically in vue.js. It is very simple to change image src using dynamic variable. Here in this tutorial, we are going to explain how you can change the image url in Vue.js. You can also use our online editor to edit and run the code online.
Vue.js Change Image src | Url Example
You can change image src in vue.js simply as below-
Example:
<div id="app">
<p>{{image1}}</p>
<img :src='image1'><br>
<button @click="myFunction()">Click Me</button>
</div>
<script>
new Vue({
el: '#app',
data: {
image1 :"https://www.tutorialsplane.com/wp-content/uploads/2018/01/nature-3082832_640.jpg",
image2 :'https://www.tutorialsplane.com/wp-content/uploads/2018/01/away-3024773_640.jpg'
},
methods:{
myFunction: function () {
this.image1 = this.image2;
}
}
});
</script>
|
Output of above example-
Advertisements
