Checking if an image is loaded or not on the browser using VueJS?

Vue JS Javascript Library Web Development Front End Technology

Whenever we insert an image in the front end of any system, it is very important to show the user proper data and images to enhance the user experience. In any project, an image is basically loaded from the remote path URL or from the application. An image may not be loaded properly in the below scenarios −

Configuring the wrong image URL
Poor Internet/Network connection

It is very important to check if an image is loaded or not, because if an image does not load due to poor network connection we can try loading the image again. Here we are going to use the <img> tag to check whether an image is successfully loaded or not.

@load − This event is triggered when an image is loaded and then executed. It will not be executed until the image is successfully loaded.

Syntax

Following is the syntax that we can use to check if an image is loaded or not using Vue.js −

data () {
   return {
      isLoaded: false
   }
},
methods: {
   onImgLoad () {
      this.isLoaded = true
   }
}

Here, If the image is successfully loaded, the isLoaded flag is set to 'true' else it is set to 'false'.

Example: Checking if an image is loaded or not

Put up your image file in your vueJs assets folder so that it could be retrieved later. Below is the path where you need to put your file so that vueJS is able to read it.

Directory Structure – $Project_name
			   |--- public
	                    |--- ** Place your file here **

Copy paste the below code snipped in your vue project and run the vue project. You shall see the below output on the browser window.

FileName - app.js
Directory Structure -- $project/public -- app.js

// Calling the function- onImgLoad() when image is loaded
const parent = new Vue({
   el: "#parent",
   data () {
      return {
         isLoaded: false
      }
   },
   methods: {
      onImgLoad () {
         this.isLoaded = true
      }
   }
})

FileName - index.html
Directory Structure -- $project/public -- index.html

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
   <title> Checking if an image is loaded or not </title>
   <body>
      <div id='parent'>
         <img src="tutorialspoint.png" alt="Image" @load="onImgLoad">
         <h2>Image Loaded : {{isLoaded}} </h2>
      </div>
      <script src='app.js'></script>
   </body>
</html>

Run the following command to get the below output −

C://my-project/ > npm run serve

Complete Code with HTML

Below is the complete code with HTML. We added app.js with index.html to form a single file. You can now run the below code as an HTML file.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <title> Checking if an image is loaded or not </title>
   <body>
      <div id='parent'>
         <img src="https://www.tutorialspoint.com/static/images/logo-color.png" alt="Image" @load="onImgLoad">
         <h2>Image Loaded : {{isLoaded}} </h2>
      </div>
      <script>
      
         // Calling the function- onImgLoad() when image is loaded
         const parent = new Vue({
            el: "#parent",
            data () {
               return {
                  isLoaded: false
               }
            },
            methods: {
               onImgLoad () {
                  this.isLoaded = true
               }
            }
         })
      </script>
   </body>
</html>

When the image is loaded successfully, the message displays as "Image Loaded : true" else displays "Image Loaded : false".

You can change the image src path and check for different images. Also, check with an image that doesn’t exist.

Mayank Agarwal

Updated on: 12-Apr-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started