Vue.js Check if an Image is Loaded or Not

Published on Mar 02, 2020

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.

Comments (0)