javascript - jquery函数中的参考rails图像

Question

我有一个应该更改页面背景的 jquery 函数。我希望背景是 app/assets/images 目录中的图像。但是，我对使用资产管道引用图像的正确方法感到困惑。

这是我现在的行：

    $('body').css("background-image", "url('welcome.png')");

在 url 参数中访问图像的最佳方法是什么？

Answer 1

这在文档中有所介绍：

http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

您应该使用“2.3.3 JavaScript/CoffeeScript 和 ERB”中描述的方法，这意味着将 .erb 扩展名添加到您的 JS 文件中，并使用asset_path。

另一种更优雅的方法是将图像移动到 css.scss 文件中的类定义中，然后在 jQuery 中添加该类：

.welcome {
  background-image: url(image-path('welcome.png'));
}

在你的 jQuery 中：

$('body').addClass("welcome");

Answer 2

试试这个：

$('body').css("background-image", "url('/assets/welcome.png')");

为了访问管道中的资产，您必须指定assets文件夹。

我一直在试图找到我在哪里读到这个，但 Rails 基本上将所有资产帮助器 url 转换为类似/assets/asset.png或类似的东西，/assets/stylesheet.css所以你应该能够通过assets在源 url 中指定文件夹来做同样的事情。

Answer 3

$('body').css("background-image", "url('/app/assets/images/welcome.png')");?

假设应用程序位于文档根目录。

Answer 4

在我看来，您需要使用 .erb（嵌入式 ruby​​）扩展来允许在您的 .js 文件中使用 rails 路径助手。如果你的 js 文件（例如 balabala.js）在asset/javscripts/，把它的名字改成balabala.js.erb，然后使用：

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

在你的asset/javscripts/application.js 中需要这个文件

//= require balabala

然后它应该工作