DEV Community

Zahid Jabbar
Zahid Jabbar

Posted on β€’ Edited on

9 2

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?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay