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:

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

Script Part

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

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)

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


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


Leave a Reply

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