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

📚 おすすめの書籍