2012-11-15 14 views
15

RailsのアセットパイプラインにあるHTML5キャンバスに画像を表示する必要がありますが、JavaScriptからアセットのパスを知る必要があります。私はjs-routesをアプリケーションの他の部分に使用していますが、アセットパイプラインのパスを取得する方法は提供されていません。JavaScriptからアセットのパスを取得する

JavaScriptからRailsアセット(画像など)へのパスを取得する正しい方法は何ですか?

答えて

18

Rails Asset Pipeline guideでは、ERBでスタイルシートを前処理することにより、スタイルシート内のアセットをコーディングする例を示しています。あなたは、ファイル名の末尾に.erbタックと仮定して、JavaScriptで同じ技術を使用することができます。

var someAssetPath = "<%= asset_path('some_image.png') %>"; 
+0

に私はこれをやって思ったが、多くの異なるがあるかもしれません....迅速な応答をありがとう資産が追加されたり削除されたりすると、これは煩雑になり、保守の悪夢に変わる可能性があります。提供されたアセット名のURLを返す独自のアクションメソッドを作成することも考えましたが、より良い選択肢を見つけることを望んでいました。 – senfo

+4

私は個人的には、これは実行可能ですが、これはひどい提案だと思います。 RailsはJavaScriptプリコンパイラではありません。 –

+1

@ArxPoetica、なぜ彼らはJavaScriptにコンパイルされたCoffeeScriptを採用しましたか? – Mischa

6

チェックアウトjs_assets(Javascript helper in rails projects)宝石。 私はそれがあなたが必要としているものだと思います。ドキュメントから

はJavaScriptでテンプレートアプリ/資産/ JavaScriptの/ルーブリック/ビュー/ index.htmlをへのパスを取得しますHAMLを使用してそれらのために var path = asset_path('rubrics/views/index.html')

5

をすることができます操作を行います。

:javascript 
    var assetPath = "#{asset_path('some_image.jpg')}"; 
+1

私はそれを動作させるために二重引用符を使用しなければなりませんでしたが、正しい軌道に乗ってくれてありがとう。 – cubsker

6

.erbファイルの要素内のパスにデータ属性を追加して、それをJQueryで取得してみませんか? some_template.html.erb内部

<%= content_tag(:div, "", id: 'some-id', data:{path_to_asset: asset_path("some_image.png")}) %> 

はその後some_javascript.js

var assetPath = $("#some-id").data("pathToAsset"); 
+0

私はこのような提案をしています。 .erbをjsファイルに追加する代わりに。 – kev

+1

イメージパスでjavascriptから派生した変数を使用する必要がある場合は、erb注入でアセットパスを使用することはできません。 –

関連する問題