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 のエラーがどんどん増えていって,ちょっとビックリした.