web-dev-qa-db-ja.com

Rails 3.1アセットパイプラインを使用したJavaScriptコード内の画像のURL?

CSSファイルでは、次のコマンドを使用して、画像アセットの適切な名前(フ​​ィンガープリント付き)を取得できます。

background-image: url(image-url("Rails.png"))

しかし、JavaScriptファイルからどのように同じことをしますか?

26
pupeno

Sasshelperメソッドを使用しているようです。

標準の(Sass以外の)CSSでは、次のようにします。

.class { background-image: url(<%= asset_path 'image.png' %>) }

CSSファイルでは、拡張子にerbを追加する必要があります。

file_name.css.erb

Javascriptの場合、同じルールが適用されます。

file_name.js.erb

およびファイル内:

var image_path = '<%= asset_path 'image.png' %>'

Rails アセットパイプラインガイド は、これらの機能の使用方法に関する優れた情報源です。

49
Richard Hulse

Rails 4では、js.erbビューを使用する代わりに、アセットパイプラインに固執し、gonまたは説明されている他の手法を使用する代わりに変数を使用してURLを渡すことをお勧めしますat: Ruby on Rails-JavaScript変数をコントローラーから外部Javascriptアセットファイルに送信

gonの場合:

app/views/layouts/application.html.erb:

<head>
  <meta charset="utf-8"/>
  <%= include_gon %>

app/controllers/application_controller.rb:

before_filter { gon.path = asset_path 'image.png' }

app/assets/javascripts/file.js.coffee:

alert gon.path

この方法は、ファイルが起動時に1回だけプリコンパイルされ、Rails経由ではなくサーバーによって提供され、残りのJと同じHTTPリクエストで提供されるため高速です。