Rails 4 Javascript：图像路径出现问题

Question

我试图让背景图像每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'});

对此事的任何意见表示赞赏。

Answer 1

您可以使用.erb（嵌入式ruby）扩展程序在.js文件中允许rails路径助手：

1）使用图像路径助手将原始文件（my_script.js）保存为my_script.js.erb：

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

另外，请确保正确设置资产管道：

来自Rails资产管道指南（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

Answer 2

这解决了我的问题：Section 2.3.1 of guides.rubyonrails.org/asset_pipeline.html

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

请注意，tree-rays.jpg位于app / assets / images（Rails 4应用程序）中。