(An English translation is available here.)

はじめに

img.onerror発生時に、正常に表示されない画像をそのままにするのではなく、img.srcを書き換えて代替画像を表示したり、img.style.display = 'none'を設定してDOMから<img>を削除するという方法があります。

私の場合は、<img>の代わりに適当な<div>を表示したかったのですが、Google検索してもその方法が見つからず・・・。自分で実験してみてうまくいった方法があるので紹介します。

方法

簡潔に言うと、img.outerHTMLを設定すれば<div>に置き換えられると分かりました。

See the Pen Untitled by Tomoyuki Aota (@tomoyukiaota) on CodePen.

上記のコードではtargetImage.outerHTML = "<div>Invalid Image!</div>";としています。
この<div>にstyleを設定すればいい感じになります。

実際のケースとして、私が開発中のPhoto Data Viewerというアプリがあります。
このアプリは、ブラウザ上で写真ファイルのExifを確認するためのアプリです。<img>で表示できないファイル、つまり写真ファイル以外を指定された場合は、写真を表示できない代わりに<div>を使ってUnsupported File Formatと表示します。
実際のコードはこちらです。
Next.jsを使っているのでonerrorを設定する箇所など違いますが、outerHTMLを設定するというのは同じです。

何かのお役に立てば幸いです。