Vue.js Check if an Image is Loaded or Not

Published on March 2, 2020 29 sec read

We're available to do freelance project. Take a look at our services!

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 *