Rails不显示背景图片

Question

I have custom CSS file style.css, not in application.css:

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

I did

rake assets:precompile RAILS_ENV=production

but it doesn't show image. Also I gave permissions to image(755). How can I solve it?

And there is no errors in console

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)

When I open from browser http://example.com/assets/book.jpg it doesn't open, too

Answer 1

After precompile image path will be changed so you need to use asset_path for get correct image path from asset.

If you use asset_path then it will be easy to get image after precompile.

Use this:

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

instead of:

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

Answer 2

Assuming that the book.png is a local image, there are probably two changes you need to make:

a. Change style.css to style.css.scss

b. Replace the background-image: url('book.png'); with background-image: image-url('book.png');

This ensures that the CSS uses the full asset URL for the book.png image.

Answer 3

Guides are your friends .

The problem is that assets in the asset pipeline are renamed to include a checksum that reflects their content. The problem with that is, that the link to the actual image is different than the one you expect. Only in production, since assets are only precompiled for production environments. In development there's no problem, because assets are recompiled in-place after any change and served with parameters that minimize possible caching.

It's for the greater good. The result of this is that if the file changes in the new release, it gets the different name when served (even if you didn't rename it yourself), so browsers and caching systems detect the change immediately and request the new asset. No pain with cache invalidation.

ERB is used during asset precompilation , and you can use it by adding .erb to file name, like login.css.erb . There is an example in the guides .

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

The guides even describe a way of embedding an image right into CSS in base64 . It works well with small images linke PNG icons, one less request and only +33% to image size.

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