ruby-on-rails - JavaScriptからアセットパスを取得する

Question

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

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

score 25 · Accepted Answer

Rails Asset Pipelineガイドでは、ERBを使用してスタイルシートを前処理することにより、スタイルシートにアセットをコーディングする例を示しています。.erbファイル名の最後にを追加すると仮定すると、JavaScriptでも同じ手法を使用できます。

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

score 9 · Accepted Answer

js_assets（RailsプロジェクトのJavascriptヘルパー） gemをチェックアウトしてください。まさにあなたが必要としているものだと思います。

ドキュメントから：

javascriptでテンプレートapp/assets/javascripts/rubrics/views/index.htmlへのパスを取得します。 var path = asset_path('rubrics/views/index.html')

score 7 · Accepted Answer

.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");

score 6 · Accepted Answer

HAMLを使用している場合は、次のことができます。

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

score 4 · Accepted Answer

Rails 4.1で同じ問題に遭遇し、画像のCoffeescriptでRailsアセットの参照を使用しました。追加のライブラリは必要ありません。

score 0 · Accepted Answer

私の場合、スタイルシートのパスを取得したかったのですが、railsがキャッシュバスティング用に生成するハッシュにより、ハードコーディングが不可能になりました。

私にとって非常にうまく機能したのは、html（レイアウト）のメインスタイルシートリンク要素にIDを割り当ててから、javascriptを使用してhrefを抽出することです。基本アセットパスが必要な場合は、必要なデータを属性として使用して汎用要素を作成することもできます。

レンダリングされたHTML

<link rel="stylesheet" href="mypath/main.css" type="text/css" id="main-css">

JS

$("#main-css").attr("href"); // "mypath/main.css"

6 に答える 6