言葉のさんぽ道

~気ままに写真とゲームの話題が更新されるはず~

画像パスに設定したファイルが存在しない場合に別の画像を表示する方法

DB等の動的なデータから画像パスを取得してくるような作りのシステムの場合、取得してきた画像パスに紐付くファイルが存在しないケースがある事を想定して対応を入れる必要がある。
この場合の対応としては、IMGタグの中にonerrorイベントを入れ、その中で別の画像に差し替える処理を入れれば良い。
具体的には以下。

<img src="$img_src" onerror="errImg(this)">


<script type="text/javascript">
function errImg(obj){
 var noImg = new Image();
 // 変更する画像ファイルのパス
 noImg.src = "./no_image.gif";


 if (obj.src != noImg.src ) {
  obj.src = noImg.src;
 }
}
</script>

尚if文を入れているのは、もし変更する画像ファイルのパスが無い場合に延々とonerrorイベントが呼ばれてしまう為である。