読者です 読者をやめる 読者になる 読者になる

jQuery で画像が存在しない場合に代替画像に差し替える

jQuery で,リクエストした画像が存在しない場合に代替画像に差し替える実装を試してみた.ただしまぁ,アプリ内で存在確認できるなら,そっちでやるべきなので,フロントで判定しないといけないような状況でのみ使う感じかな.

Rails でのサンプルコード

image_tag を書くときに class を指定しておく.

image_tag "a.png", { class: 'image-404-replace' }

画像が存在しない場合に .error でハンドリングできるので,代替画像に差し替える.

:javascript
  $(function() {
    $('.image-404-replace').error(function() {
      $(this).attr({
        src: '/assets/default.png'
      });
    });
  });

ちなみに

差し替える代替画像自体が存在しない場合を試してみたら,リクエストが無限に飛んでしまったので,それはどう回避したら良いのだろう?Chrome Developer Tool で 404 のエラーがどんどん増えていって,ちょっとビックリした.

関連エントリー

jquery - Detecting a image 404 in javascript - Stack Overflow
imgタグの画像がない場合にNo Imageに差し替え【jQuery/JavaScript】 - 酒と泪とRubyとRailsと