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

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

🚜 View/Html側

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

🐮 JavaScript/CoffeeScriptでの書き方

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

JavaScriptで書く場合

$(document).ready(function() {
    $('.js-replace-no-image').error(function() {
        $(this).attr({
            src: '/images/no-image.jpg',
            alt: 'no image'
        });
    });
});

CoffeeScriptで書く場合

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

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

😎 参考リンク

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

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと