How to check if an image is loaded in Vue.js

In this tutorial, you’ll learn how to check if an image is loaded in Vue.js.

I was working on a new project recently, and I needed to call an event right after the image was loaded.

I found this useful event called @load that you can use with <img>.

Here’s how it works.

Let’s create a new Vue.js app and add an image.

<div id="app">
  <img class="img-fluid" src="/static/images/random.jpg" @load="onImgLoad">
</div>

Now we can check if this image of the Milky Way was fully loaded.

new Vue({
  el: "#app",
  data () {
    return {
      isLoaded: false
    }
  },
  methods: {
    onImgLoad () {
      this.isLoaded = true
    }
  }
})

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 

Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-image-loaded

PS: Make sure you check other Vue.js tutorials, e.g. How to trigger a mouse click in Vue.js, Detect mobile device in Vue.js, How to deploy a Firebase app to multiple environments.