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-


<div id="app">	
	<img :src='image1'><br>
	<button @click="myFunction()">Click Me</button>
 new Vue({
el: '#app',
  data: { 
	  image1 :"",
	  image2 :''
    myFunction: function () {	
		this.image1 = this.image2;


Try it »

Output of above example-

Vue.js Change Image src


Add Comment

📖 Read More