画像読み込み失敗時に代替え画像を表示したい
アフィリエイトなどの外部サイトから<img>タグで画像を表示した際に参照元サイトの画像がいきなり404エラーになった際、その事に自分自身が気づくまでずっと「×」になったままで困る事が多々あるかと思います。そういった場合にonerrorイベントという処理を予め適用させておく事で、不意な画像の404エラーが発生した際でも代替え画像を表示させる事で画像の404エラーを防ぐ方法を紹介します。
スポンサードサーチ
画像読み込み失敗時に代替え画像を表示する方法
◆通常の<img>タグの基本形は以下になると思います
<img src="(img.jpg)" alt="title" />
(img.jpg)=表示したい画像URL
◆上記の<img>タグに以下を追加してあげます
onerror="this.src='(img2.jpg)'
(img2.jpg)=img.jpg読み込み失敗時に代替え画像として表示したい画像URL
◆上記を追加した<img>タグが以下になります
<img src="(img.jpg)" alt="title" onerror="this.src='(img2.jpg)'"/>
編集完了後、テストで(img.jpg)に不正なURLを記載して代替え画像が正常に表示されていれば完了です。
※自身の管理サーバに画像を置いている場合は、使用するケースは少ないかもしれませんが、アフィリエイトなどでASP側が勝手に画像URLを変更した際に「×」表示になってしまう事がたまに有ります。そういった時は、予め作成しておいた「noimg.jpg」などを代替え表示させるといいかもしれません。
画像読み込み失敗時に画像タグを削除する
こちらは番外編ですが、画像読み込み失敗時に<img>タグ自体を削除してくれる方法です。
◆画像読み込み失敗時に画像タグを削除する
<img src="(img.jpg)" onerror="this.parentNode.removeChild(this)">
編集完了後、テストで(img.jpg)に不正なURLを記載して代替え画像が正常に表示されていれば完了です。
phpで処理すればいい所ではありますが、かけだしWEBマスターさん達や、勉強中の方はこの手法を活用する事で解決しますので、試してみてはいかがでしょうか。
