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

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

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

请注意，tree-rays.jpg位于应用程序/资产/图像（Rails 4应用程序）中。