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

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)