web-dev-qa-db-ja.com

Rails 4 JavaScript：画像パスに問題があります

6秒ごとに背景画像を変更しようとしていますが、これは常に404エラーです。

たとえば、以下はJSコンソールに表示されます

http://localhost:3000/app/assets/images/ggb_mist.png 404 (Not Found)

これを簡単にするために、私はbackground-colorを試して、それが機能していることを確認しました。下記参照：

$(document).ready(function() {
  function testing() {
    $('.holder').css('background-color', 'red');
  };
});

上記は動作します。今度はapp/assets/images/imagefilenamehere.pngにある画像で同じことを実行しようとすると、常に404エラーが発生します。

filenamehere.png
../assets/images/filenamehere.png
../app/assets/images/filenamehere.png
../images/filenamehere.png

以下が機能しないのはなぜですか？

$('.holder').css({'backgroundImage':'../assets/images/filenamehere.png'});

この件に関するご意見をお待ちしています。

javascriptimageruby-on-rails-4asset-pipelinerelative-path
15
Nubtacular

これは私の問題を解決しました： guides.rubyonrails.org/asset_pipeline.htmlのセクション2.3.1

$('.holder').css("background-image","url(<%= asset_path('tree-rays.jpg') %>)");

ご了承ください tree-rays.jpgはapp/assets/images（Rails 4アプリケーション）にあります。

9
Nubtacular

.erb（組み込みRuby）拡張機能を使用すると、.jsファイルでRailsパスヘルパーを許可できます。

1）画像パスヘルパーを使用して、元のファイル（my_script.js）をmy_script.js.erbとして保存します。

$('.holder').css({"background-image":"<%= asset_path('filenamehere.png') %>"});

また、アセットパイプラインが正しく設定されていることを確認してください。

Rails Asset Pipeline guide（ http://guides.rubyonrails.org/asset_pipeline.html ）から

2）あなたのJavaScriptファイル（my_script.js.erb）は中にあります：

app/assets/javascripts/
lib/assets/javascripts/
vendor/assets/javascripts/
vendor/assets/somepackage/

3）ファイルがマニフェストで参照されている（おそらくapp/assets/javascripts/application.js）：

//= require my_script
19
Jaron Gao