酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

imgタグの画像がない場合にNo Imageに差し替え【jQuery/JavaScript】

imgタグで指定した画像がない場合にjQueryでNo Imageに差し替えるTipsです。超簡単ですが、破壊力抜群なので良かったら是非試してみてください!


View/Html側

指定した画像がなかった場合にNo Imageに置き換えたいimgタグのclassにjs-replace-no-imageクラスを設定。

JavaScript/CoffeeScriptでの書き方

下のコードはheaderの中に書くこと。

JavaScriptで書く場合

1
2
3
4
5
6
7
8
$(document).ready(function() {
    $('.js-replace-no-image').error(function() {
        $(this).attr({
            src: '/images/no-image.jpg',
            alt: 'no image'
        });
    });
});

CoffeeScriptで書く場合

1
2
3
4
$('.js-replace-no-image').error ->
  $(this).attr
    src: '/images/no-image.jpg'
    alt: 'no image'

たったこれだけで、指定した画像がない場合にだけNo Imageを表示してくれます。便利便利!

Special Thanks

[jQuery] 指定された画像が存在しないときに別の画像に置換する - かちびと.net

おすすめの書籍