DEV Community

Zahid Jabbar
Zahid Jabbar

Posted on • Updated on

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.

 Looks good?  Definitely no!

πŸ‘‰ 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> 
Enter fullscreen mode Exit fullscreen mode

mountains

😍 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> 
Enter fullscreen mode Exit fullscreen mode

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

setAltImg(event) { 
    event.target.src = "working-image.jpg" 
} 
Enter fullscreen mode Exit fullscreen mode

Yasss loaded

πŸ’― 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.

Discussion (4)

Collapse
jackwkinsey profile image
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.

Collapse
zahidjabbar profile image
Zahid Jabbar Author

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

Collapse
jackwkinsey profile image
Jack Kinsey • Edited on

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 πŸ˜€

Collapse
ricky11 profile image
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?