- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Checking if an image is loaded or not on the browser using VueJS?
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.
1K+ Views
