画像読み込み失敗時に任意の代替え画像を表示する方法

納得している画像

アフィリエイトなどの外部サイトから<img>タグで画像を表示した際に参照元サイトの画像がいきなり404エラーになった際、その事に自分自身が気づくまでずっと「×」になったままで困る事が多々あるかと思います。そういった場合にonerrorイベントという処理を予め適用させておく事で、不意な画像の404エラーが発生した際でも代替え画像を表示させる事で画像の404エラーを防ぐ方法を紹介します。

画像読み込み失敗時に代替え画像を表示する

◆通常の<img>タグの基本形は以下になると思います

(img.jpg)=表示したい画像URL

◆上記の<img>タグに以下を追加してあげます

(img2.jpg)=img.jpg読み込み失敗時に代替え画像として表示したい画像URL

◆上記を追加した<img>タグが以下になります

編集完了後、テストで(img.jpg)に不正なURLを記載して代替え画像が正常に表示されていれば完了です。

※自身の管理サーバに画像を置いている場合は、使用するケースは少ないかもしれませんが、アフィリエイトなどでASP側が勝手に画像URLを変更した際に「×」表示になってしまう事がたまに有ります。そういった時は、予め作成しておいた「noimg.jpg」などを代替え表示させるといいかもしれません。

画像読み込み失敗時に画像タグを削除する

こちらは番外編ですが、画像読み込み失敗時に<img>タグ自体を削除してくれる方法です。

◆画像読み込み失敗時に画像タグを削除する

編集完了後、テストで(img.jpg)に不正なURLを記載して代替え画像が正常に表示されていれば完了です。

phpで処理すればいい所ではありますが、かけだしWEBマスターさん達や、勉強中の方はこの手法を活用する事で解決しますので、試してみてはいかがでしょうか。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする