Vue

by aswinkumar863

HTML

<div id="app">
  <h2>Image Loader Spinner</h2>
  <button @click="toggleimg">{{ btntext }}</button>
  <img class="loading" :src="imgsrc" width="400">
</div>

CSS

.loading {
  background: transparent url('https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif') center no-repeat;
}

Vue

new Vue({
  el: "#app",
  data: {
    imgsrc: "",
    btntext: "Show Image"
  },
  methods: {
  	toggleimg: function(){
    	if (this.imgsrc == "") {
      	var myImage = new Image();
        myImage.src = 'https://images2.alphacoders.com/103/1039991.jpg';
        myImage.onload = () => {
    			this.imgsrc = myImage.src
        }      
        this.imgsrc = 'https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif'
        this.btntext = "Hide Image"
      }else{
      this.imgsrc = ""
      this.btntext = "Show Image"
      }
    }
  }
})