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.

Top comments (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

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

Collapse
 
jackwkinsey profile image
Jack Kinsey • Edited

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?