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.