Railsでアセットを使う場合、assets/以下に入れておけば、Sprocketsが各種の処理を施していきます。それに気をつけないと、うまく動かないこともあります。
アセットのプリコンパイル
本番環境でアセットをプリコンパイルすると、
- CoffeeScriptやSassのコンパイル
- ファイル名へのダイジェスト付与
などのことが行われます。ということで、画像ファイルについてもそのままの名前では参照できなくなってしまいます。
image_pathヘルパー関数
そんなわけで、変換後の名前で参照するためのimage_pathというヘルパー関数があります。これは、ERBなどのRubyコードに埋め込むためのものです。そして、Sassではimage-pathとCSS的な命名に変わって存在しています。
ただし、どちらもJavaScriptに対して直接使えるものではありません。
ERBで埋め込む？
もちろん、JavaScriptを.js.erbのような拡張子にしてERB処理させれば、いちおう使うことはできます。ただし、
扱いづらいファイル.js.erb
$(function(){
$('#some_img').attr('src',"<%= image_path('path/to/some.png') %>")
});
というように、きわめて読み書きしづらくなってしまいます。
1ファイルだけに収める
さすがにこんなファイルで溢れかえると収拾がつかなくなるので、image_path関数をJavaScript側に出現させるファイルを作って、残りはそこを呼ぶことにします。
application/image_url.js.erb
<%
imgs = {}
Dir.chdir("#{Rails.root}/app/assets/images/") do
imgs = Dir["**/*"].inject({}) do |h,f|
h.merge!(f => image_path(f)) unless Dir.exist? f
h
end
end
%>
window.image_path = function(name){
return <%= imgs.to_json %>[name];
}
このようにすることで、他のファイルではJavaScriptの関数としてimage_pathを呼べます。
外部リンク
なお、ここのコードに対してディレクトリ階層に対応するなど、多少を手を入れた形となっています。