Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

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.

You're welcome to suggest any article to write!

Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

Leave a Reply

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