Vue.js Check if an Image is Loaded or Not
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:
<template>
<div id="app">
<img src="@/assets/logo.png" @load="onImageLoad"/>
</div>
</template>
Script Part
In the script part, let’s handle the event like this:
<script>
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)
}
}
};
</script>
We’ve taken a watch to see the old & new value. Now run the app and look at the console to see the output.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.