Image Binding Error Handling in Vue.js

🐛 We all know that broken images don't look good and they give a very bad user experience.

👉 I was working on a project and instead of showing an alt text if the image is broken, I wanted to show some other alternate image. For this, first, I needed to check if the image is broken then show the alternate image.

👀 I looked for solutions and some people were doing it by styling broken images which is also good but this was not the solution I was looking for.

🙌 I came to know about @error event on images and this proved really helpful.

👨‍💻 Let's explore this with a code example:

😕 without @error

If we don't use @error and just provide the alt text, it looks ugly.

<template> 
    <img class="image" :src="source" alt="mountains" > 
</template> 

😍 with @error

By using the @error event on images, we can show the alternate image if the original image is broken or not loaded for any reason. @error will only call the provided method if there is any error in loading the original image.

<template> 
    <img class="image" :src="source" @error="setAltImg" alt="mountains" > 
</template> 

imgUrlAlt is the method that sets the image's src to alternate image.

setAltImg(event) { 
    event.target.src = "working-image.jpg" 
} 

💯 Conclusion

I really liked achieving the same thing in 3-5 lines with @error and avoiding writing extra 10-15 lines of CSS.

👋 Say Hi

I am quite active on Twitter you can follow me there or visit my Blog to know more about me.