2012-04-21 18 views
9

私はこの回答を検索しています。しかし、私はこの仕事をしているようには思えません。数時間です。私を助けてください。railsアプリケーションのassets/imagesフォルダから画像を取得する方法

私は、HTMLを構築し、以下の機能を備えたJavaScriptファイルを持っている私の資産フォルダ@app/assets/images/rails.png.

に保存された画像を表示しようとしています、私のレールアプリのWebページです。この関数の中で、画像へのリンクを渡したいと思います。これは私が現在持っているコードです。

function addToInfoWindow(infoWindowContent) 
{ 

infoWindowString = '<div class="infoWindow">'+ 
**'<img src="/assets/images/rails.png" />'+** 
'<p>'+infoWindowContent+'</p>'+ 
'<p><a href="http://www.google.com">See here</a></p>'+ 
'<p><a href="http://www.google.com">Upload a photo</a></p>'+ 
'</div>'; 
infoWindow.setContent(infoWindowString); 

} 

上記のコードからわかるように、太字部分が問題です。私はその画像ファイルにアクセスするためにURL文字列のいくつかの異なる組み合わせを試しましたが、画像はhtml要素に表示されません。

私は見て、見て、image_url('rails.png')のようなレールヘルパー機能を試してみました。しかし、私はそれらを間違った場所に入れなければなりません。誰かが私を助けてくれますか?私は、上記のコードのどの機能を/assets/images/rails.pngにイメージを取得するために追加する必要があるのか​​を示してください。そのURLは、上の強調表示された部分に配置され、私のビューに表示されます。

答えて

23

あなたがしたい場合は、あなたが「アップグレードする必要がレールのヘルパーを使用します"erbのあなたのjavascriptファイル。

whatever.jsからwhatever.js.erbに名前を変更してください。今度は、ファイルを配信する前にすべてのerbコード(<%と%>の間のもの)を実行します。

だから、次のように行うことができます。

<img src="<%= asset_path('rails.png') %>" /> 

More information、2.2.3を参照してください。

+1

これはうまくいきました。ワオ。私は4時間かけてあらゆる種類のものを試してみましたが、そのファイルには拡張子が付いていなかったからだけです!本当に助けてくれてありがとうございます – banditKing

+1

いつもそうです。 – klump

+1

coffeescriptを使用している場合、erbを使用する拡張子は '.js.cofee.erb'ではなく' .js.coffee'です。 erbは自動です。私は知っている、それはそのような変です。しかし、それはどのように動作します。情報のこのビットは人々にしばらく時間を節約するはずです。 – ahnbizcad

3

あなたは純粋なJavaScriptでIMAGE_TAGのようなレールのヘルパーを使用することはできません - .erbを追加し、asset_pathを使う(klumpの回答を参照してください)

関連する問題