我有一个应该更改页面背景的 jquery 函数。我希望背景是 app/assets/images 目录中的图像。但是,我对使用资产管道引用图像的正确方法感到困惑。
这是我现在的行:
$('body').css("background-image", "url('welcome.png')");
在 url 参数中访问图像的最佳方法是什么?
我有一个应该更改页面背景的 jquery 函数。我希望背景是 app/assets/images 目录中的图像。但是,我对使用资产管道引用图像的正确方法感到困惑。
这是我现在的行:
$('body').css("background-image", "url('welcome.png')");
在 url 参数中访问图像的最佳方法是什么?
这在文档中有所介绍:
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");
试试这个:
$('body').css("background-image", "url('/assets/welcome.png')");
为了访问管道中的资产,您必须指定assets
文件夹。
我一直在试图找到我在哪里读到这个,但 Rails 基本上将所有资产帮助器 url 转换为类似/assets/asset.png
或类似的东西,/assets/stylesheet.css
所以你应该能够通过assets
在源 url 中指定文件夹来做同样的事情。
$('body').css("background-image", "url('/app/assets/images/welcome.png')");
?
假设应用程序位于文档根目录。
在我看来,您需要使用 .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
然后它应该工作