While working on a website I was loading an image dynamically based on the current page URL.
Being sure I’d eventually forget to create an image in the future, I looked into avoiding the usual “broken image” that says “this website is abandoned”.
The technique I used is this:
<img src="/{{$bookname}}.png" onerror="this.remove()" /> TIP: this inside an inline event handler in HTML refers to “this element”
Sure, the optimal way is make sure images are always working.

Flavio Copes

The technique I used is this: this inside an inline event handler in HTML refers to “this element” That’s a workaround that uses the platform features because I know I might not pay attention to that as I’m a solo developer and I might have a broken image visible for weeks before I realize.

HTML, avoid displaying a broken image if the image is not found

This is a very neat technique, especially when you refer to external images that you don’t have any control on 👌 I will definitely use this for my upcoming blog engine 😎

Thank you! this is great.
I wonder, since it seems like ‘inline javascript’ wouldn’t it be better to set a javascript file with a function for all img elements?

This is fantastic, thanks for sharing, Flavio. 🎉