March 9, 2018

Vue.js Display image

Vue.js Display image We can use v-bind:src=”” to display image in vue.js. We can also use :src=”” shorthand to show image in vuejs. Here in this article we are going to explain how you can display image in vuejs. You can also use our online editor to edit and run the code online.

Vue.js Display image Example

Here is simple example to –

Example:

<div id="app">	
	<p v-if="myImage.length > 0"><img v-bind:src="myImage"></p>
	<button @click="myFunction()">Show Image</button>
</div>
<script>
 new Vue({
el: '#app',
  
  data: { 
	  myImage:''
  },
  
   methods:{
    myFunction: function () {	
		this.myImage = "https://www.tutorialsplane.com/wp-content/uploads/2018/02/27867786_1714460465242017_6847995972742989230_n.jpg";
    }
   }

});
</script>

Try it »

In the above example we have create myFucntion to assign image src to variable myImage. When you click on the show image button it will update the variable and display image.

Output of above example-

Vue.js Display image

Vue.js Display image Example

Example:

Add Comment

📖 Read More