Question

我有自定义CSS文件style.css，而不是application.css：

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

我做了

rake assets:precompile RAILS_ENV=production

但它没有显示图像。我还给了图像权限（755）。我该如何解决？

控制台中没有错误

日志/ 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打开时，它也不会打开

Answer 1

预编译后，图像路径将被更改，因此您需要使用asset_path从资产中获取正确的图像路径。

如果您使用asset_path，那么在预编译后很容易获得图像。

使用此：

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

而不是：

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

Answer 2

假设book.png是本地图像，您可能需要进行两项更改：

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

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

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

Answer 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中的方法。它适用于小图像linke PNG图标，少一个请求，只有+ 33％的图像大小。

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

Rails不显示背景图像

3 个答案: