(An English translation is available here.)
はじめに
img.onerror発生時に、正常に表示されない画像をそのままにするのではなく、img.srcを書き換えて代替画像を表示したり、img.style.display = 'none'を設定してDOMから<img>を削除するという方法があります。
- How to replace HTML img broken by missing or erroring image src
- How to hide image broken Icon using only CSS/HTML?
私の場合は、<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を設定するというのは同じです。
何かのお役に立てば幸いです。