Vue.js Check if an Image is Loaded or Not

Published on March 2, 2020 29 sec read

In this short article, I’m going to share how to check if an image is loaded in Vue.js. We’ll use @load event to do this.

Template Part

Let’s take an image & set @load event:

<template>
  <div id="app">
    <img src="@/assets/logo.png" @load="onImageLoad"/>
  </div>
</template>

Script Part

In the script part, let’s handle the event like this:

<script>
export default {
  data() {
    return {
      isImageLoaded: false
    }
  },
  methods: {
    onImageLoad () {
      this.isImageLoaded = true
    }
  },
  watch: {
    isImageLoaded: function(newValue, oldValue) {
      console.log("New value is: " + newValue)
      console.log("Old value is: " + oldValue)
    }
  }
};
</script>

We’ve taken a watch to see the old & new value. Now run the app and look at the console to see the output.

Author

Hey, I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Buy me a coffeeBuy me a coffee Follow

Leave a Reply

Your email address will not be published. Required fields are marked *