はじめに

<img src="xxxx.png"> で xxxx.png が 404 エラーとなったときに、デフォルトで代わりの画像を表示する方法をまとめた。

TL;DR

  • onerror="this.src = 'alt.png'; this.removeAttribute('onerror')" を指定
    • エラー時には代替画像を読み込んで、onerror 属性自身も削除
  • onload="this.removeAttribute('onerror'); this.removeAttribute('onload'); も一緒に指定
    • エラー無し時に onerror, onload 属性を消せる
  • 上記をまとめると以下
1
2
3
4
<img src="404.png"
  onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"
  onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"
>

※MDN によると onerror は非推奨、ご利用は計画的に

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. 画像にアクセスできない場合の挙動
    2. onerror で代替画像を表示する
    3. onload で onerror を削除する
  4. まとめ
  5. その他・メモ
  6. 参考文献

詳細

まずは動作イメージ。

See the Pen [HTML] img タグで 404 エラー発生時に代替画像を表示 by 17num (@17num) on CodePen.

画像にアクセスできない場合の挙動

img タグで、src に指定した画像にアクセスできない場合には、おなじみの壊れた写真アイコン(下記)が表示される。

onerror で代替画像を表示する

画像にアクセスできないときに、代替画像を表示するには onerror 属性を指定すると簡単に src の変更ができる。

onerror の中身は JavaScript。

1
<img src="hoge.png" onerror="console.log('hello from onerror');">

onerror で画像を差し替えるには this.src = 'xx' とすれば OK。

1
<img src="hoge.png" onerror="this.src = 'fuga.png';">

上記で hoge.png にアクセスできなければ、hoge.png が fuga.png に差し替わる。

1
<img src="fuga.png" onerror="this.src = 'fuga.png';">

このままだと以下の問題がある

  1. fuga.png もアクセスできない場合に onerror を繰り返す
  2. onerror が残ってダサい（個人の感想）

ということで、onerror の処理の最後で onerror を削除する。

1
<img src="hoge.png" onerror="this.src = 'fuga.png'; this.removeAttribute('onerror')">

これで hoge.png にアクセスできなければ、最終的にこうなる。

1
<img src="fuga.png">

fuga.png にもアクセスできなければ、例の壊れた写真が出るがもうどうしようも無い（と思う）

onload で onerror を削除する

onerror を使うことで、src にアクセスできない場合に画像を差し替えることができた。

が、逆に src にアクセスできた場合 は、onerror が残ってしまう。

1
2
<!-- hoge.png が通常通り表示できた場合は onerror が削除されない -->
<img src="hoge.png" onerror="this.src = 'fuga.png'; this.removeAttribute('onerror')">

画像表示できた場合に onerror 属性を消したい場合は onload を使うと良い。

1
2
3
4
<img src="hoge.png"
  onerror="this.src = 'fuga.png'; this.removeAttribute('onerror')"
  onload="this.removeAttribute('onerror')"
>

これで hoge.png が読み込めた場合は、以下のようになる。

1
<img src="hoge.png" onload="this.removeAttribute('onerror')">

あとは onerror の時と同じように onload を削除する処理も追加すれば OK。

1
2
3
4
<img src="hoge.png"
  onerror="this.src = 'fuga.png'; this.removeAttribute('onerror'); this.removeAttribute('onload')"
  onload="this.removeAttribute('onerror'); this.removeAttribute('onload')"
>

なお onload は onerror="this.src='fuga.png'; で画像を差し替え(て読み込み完了し)た時にも発火する。

なので、必ず代替画像にアクセスできるのであれば、this.removeAttribute('onload') は onload だけとしても良い。

1
2
3
4
<img src="hoge.png"
  onerror="this.src = 'fuga.png'; this.removeAttribute('onerror')"
  onload="this.removeAttribute('onerror'); this.removeAttribute('onload')"
>

まとめ

  • onerror="this.src = 'alt.png'; this.removeAttribute('onerror')" を指定
    • エラー時には代替画像を読み込んで、onerror 属性自身も削除
  • onload="this.removeAttribute('onerror'); this.removeAttribute('onload'); も一緒に指定
    • エラー無し時に onerror, onload 属性を消せる
  • 上記をまとめると以下
1
2
3
4
<img src="404.png"
  onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"
  onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"
>

※MDN によると onerror は非推奨、ご利用は計画的に

その他・メモ

非推奨となっている理由や影響はちゃんと見てない。あと、onerror は IE, Edge 未対応(2019/11/23 現在)なので注意。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list