25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

image_pathをJavaScript側から使う

Posted at

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を呼べます。

外部リンク

なお、ここのコードに対してディレクトリ階層に対応するなど、多少を手を入れた形となっています。

25
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?