How to check an image is loaded or not in VueJS ?

0 0 2 minutes read

While inserting an Image in a VueJS project, it may fail to load due to the following reasons:

Writing wrong image URL.
Due to poor connection

Approach: We are going to use an event in <img> to check whether an image is loaded or not in VueJS, the event we are going to use is:

@load: The @load event gets triggered when the image is loaded and it gets executed.

Project Setup:

Step 1: Create a Vue Project using the following command in the command line:

vue create image-load

Note: We have taken ‘image-load‘ as the name of the Project, you can choose any name according to your choice.

The ‘image-load’ Folder will be created.
Open the folder in your Code Editor.

The project structure will look like this:

Step 2: After creating the project, add an image in the ‘assets folder’. We have added an image with the name – ‘gfg.png‘

Example: In this example, we are going to follow the following steps:

In this example, we’re going to Insert an Image on the index page of our application.
In the project “image-load“, we create a data variable ‘isLoaded‘ which has the default value “False“.
A ‘description‘ data variable is also created which holds the Heading of the Page i.e “How to check if an image is loaded in VueJs?”.
Assign a ‘@load‘ event to the Image.
The name of the event will be ‘loadImage‘, and its function will be to change the value of ‘isLoaded‘ to “True” if the image gets loaded.
And at last, we will print the value of ‘isLoaded‘ on our homePage, with the Image.

Now let’s see each step one by one with the implementation.

App.vue

<template> 
    <div> 
        <h1>{{description}}</h1> 
        <br> 
  
        <img src="./assets/gfg.png" alt="" @load="loadImage"> 
        <h2>Image Loaded : {{isLoaded}} </h2> 
    </div> 
</template> 
  
<script> 
    export default { 
        name: 'App', 
        data() { 
            return { 
                description: "How to check if Image " 
                    + "is Loaded in Vue.js or not?", 
                isLoaded: false, 
            }; 
        }, 
  
        methods: { 
            loadImage() { 
                this.isLoaded = true; 
            } 
        } 
    } 
</script> 
  
<style> 
    #app { 
        font-family: Avenir, Helvetica, Arial, sans-serif; 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
        text-align: center; 
        color: #2c3e50; 
        margin-top: 60px; 
    } 
</style> 

Run the application: In the command line, enter the following command:

npm run serve

Output: Open the browser and go to http://localhost:8080/ and you will see the following output:

Explanation: As we can see, we had Initialised “isLoaded” to False initially. The image gets loaded and ‘isLoaded‘ is assigned a True value and ‘isImageLoaded’ value is then fetched and displayed with the Image during Output.