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.

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write article on Laravel, Linux server, modern JavaScript and more on web development.

Follow