Replacing <img> with <div> when img.onerror is called

(A Japanese translation is available here.)

When img.onerror is called, there are several options instead of leaving the broken image:

• Replace img.src to set a different image
• Set img.style.display = 'none' to remove the element from DOM

References:

• How to replace HTML img broken by missing or erroring image src
• How to hide image broken Icon using only CSS/HTML?

In my case, I wanted to replace <img> with <div>. I googled for a while but couldn't find the way. I did some experiments and found that configuring img.outerHTML does the trick.

In the code above, targetImage.outerHTML = "<div>Invalid Image!</div>"; is set.
Configuring style for the <div> will make it prettier.

As an actual example, I'm developing Photo Data Viewer. This is an app to check Exif data of a photo. When the file other than photos is selected (i.e. files cannot be displayed with <img>), it displays "Unsupported File Format" using <div> instead of a photo.
The code is here.
This app uses Next.js, so the code to set onerror looks different, but setting outerHTML is the same.

I hope it helps!