Rails 不显示背景图像

Posted 2023-03-29

【中文标题】Rails 不显示背景图像

【英文标题】：Rails doesn't show background-image

【发布时间】：2014-12-24 06:11:12

【问题描述】：

我有自定义 CSS 文件 style.css，不在 application.css 中：

background-image: url('book.png');

我做到了

rake assets:precompile RAILS_ENV=production

但它不显示图像。我还授予了图像（755）的权限。我该如何解决？

并且控制台没有错误

log/production.log

I, [2014-12-24T01:22:04.323979 #27157]  INFO -- : Started GET "/login" for 81.21.82.67 at 2014-12-24 01:22:04 -0500
I, [2014-12-24T01:22:04.329702 #27157]  INFO -- : Processing by BookController#login as html
I, [2014-12-24T01:22:04.333589 #27157]  INFO -- :   Rendered book/login.html.erb within layouts/application (1.0ms)
I, [2014-12-24T01:22:04.334700 #27157]  INFO -- : Completed 200 OK in 5ms (Views: 2.9ms | ActiveRecord: 0.0ms)

当我从浏览器 http://example.com/assets/book.jpg 打开时，它也无法打开

【问题讨论】：

@Nithin 我还能为你写些什么？

book.png 住在哪里？你得到的是 404 吗？

它在开发中有效吗？

@Doon 在 app/assets/images/book.png 中。不，这里没有错误。曾经是，但现在消失了

您尝试在哪里显示图像，向我们展示视图...

【参考方案1】：

预编译后图片路径会发生变化，所以你需要使用asset_path从asset获取正确的图片路径。

如果你使用asset_path，那么预编译后很容易得到图像。

使用这个：

background-image: asset_path('book.png');

代替：

background-image: url('book.png');

【讨论】：

这里工作正常。你能把你的课程贴在这里吗？

【参考方案2】：

假设 book.png 是本地图片，可能需要做两处更改：

一个。将style.css 更改为style.css.scss

b.将background-image: url('book.png'); 替换为background-image: image-url('book.png');

这可确保 CSS 使用 book.png 图像的完整资源 URL。

【讨论】：

RAILS_ENV=production rake assets:precompile rake 中止！ NoMethodError: nil:NilClass 的未定义方法“[]”（在 /usr/local/projects/book/app/assets/stylesheets/application.css 中）

【参考方案3】：

Guides are your friends.

问题在于资产管道中的资产被重命名以包含反映其内容的校验和。问题在于，指向实际图像的链接与您期望的不同。仅在生产中，因为资产仅针对生产环境进行了预编译。在开发中没有问题，因为资产在任何更改后都会在原地重新编译，并使用尽可能减少可能缓存的参数提供服务。

这是为了更大的利益。 这样做的结果是，如果文件在新版本中发生更改，则在提供时会获得不同的名称（即使您没有自己重命名），因此浏览器和缓存系统会立即检测到更改并请求新资产。缓存失效没有痛苦。

资源预编译时使用ERB，您可以通过在文件名中添加.erb来使用它，例如login.css.erb。有an example in the guides。

.class 
  background-image: url(<%= asset_path 'image.png' %>)

指南甚至描述了一种将图像直接嵌入到 base64 中的 CSS 的方法。它适用于链接 PNG 图标的小图片，请求少了一个，图片大小仅增加了 33%。

#logo 
  background: url(<%= asset_data_uri 'logo.png' %>)

【讨论】：

RAILS_ENV=production rake assets:precompile rake 中止！ Sass::SyntaxError: Invalid CSS after "...und-image: url(": expected ")", was "

@alizade 你在那个样式表中使用 Sass/SCSS 吗？ Sass-rails 中有一个帮助程序，可让您引用 Rails 资产。或者，也许您正在使用 Sass 的 @import 导入它？ @PeterGoldstein 的回答涵盖了该案例。

不，我的文件是 login.css，而不是 .scss，我不导入任何东西

@alizade 啊，天哪，我明白了。在指南中提到将文件重命名为whatever.css.erb 以便由 ERB 评估。将很快将其添加到答案中，同时尝试。

@alizade 现在这很奇怪。查看实际文件中的内容以及public 文件夹中是否有相应的图像。