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.

Comments

[Jack Kinsey]

I had recently found this solution too, but I noticed that the onerror attribute for img is deprecated according to MDN. My understanding is that @error boils down to onerror.

Still looking for an alternative though.

[Zahid Jabbar]

@error worked fine for me. Let me know if I can help you to solve your problem.

[Jack Kinsey]

Yeah we decided to go with this as it seems to work just fine and doesn't actually map directly to the onerror attribute. So all good it seems 😀

[Rishi U]

Are you reaching in to the dom with event.target.src insteda of use the vue way which is this.$refs ? not sure which way is more performant if this is in a list?