0
Help us understand the problem. What are the problem?

posted at

updated at

img.onerror発生時に<img>を<div>に置き換える方法

(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を設定するというのは同じです。

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?