🐛 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><imgclass="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><imgclass="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 onTwitter you can follow me there or visit myBlog to know more about me.