Rails не показывает фоновое изображение

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 использует полный URL-адрес ресурса для изображения book.png.

Answer 3

Гиды твои друзья.

Проблема состоит в том, что активы в конвейере активов переименовываются, чтобы включить контрольную сумму, которая отражает их содержание. Проблема в том, что ссылка на фактическое изображение отличается от той, которую вы ожидаете. Только в производстве, поскольку активы предварительно компилируются только для производственных сред. В разработке проблем нет, потому что ресурсы перекомпилируются на месте после любого изменения и обслуживаются параметрами, которые минимизируют возможное кэширование.

Это для большего блага. Результатом этого является то, что если файл изменяется в новом выпуске, он получает другое имя при обслуживании (даже если вы не переименовали его самостоятельно), поэтому браузеры и системы кэширования немедленно обнаруживают изменение и запрашивают новый ресурс. Нет боли с аннулированием кэша.

ERB используется во время прекомпиляции активов, и вы можете использовать его, добавив .erb к имени файла, как login.css.erb, В руководствах есть пример.

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

В руководствах даже описан способ встраивания изображения прямо в CSS в base64. Он хорошо работает с небольшими изображениями в виде PNG-иконок, на один запрос меньше и только на +33% к размеру изображения.

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