Rails 4 - Фоновый образ появляется в Localhost, но не в производстве

Недавно я переписал одну из своих приложений Rails 3.2.13 для использования Rails 4. Я использовал twitter-bootstrap-rails 2.1.2 в своем приложении Rails 3. Когда я переписал версию Rails 4, она начала использовать версию 2.2.8. Я использую Phusion Passenger 4.0.20 на моих серверах разработки и производства для размещения всех моих приложений Rails.

В моем приложении Rails 3 фоновое изображение появилось правильно в локальном хосте и в процессе производства. Однако, когда я переписал приложение с использованием Rails 4 и текущей версии twitter-bootstrap-rails, я заметил, что фоновое изображение отображается правильно, но когда я его развертываю в процессе производства, фоновое изображение не отображается.

Я пробовал следующий CSS, но фоновое изображение появляется только в localhost. Первое утверждение - это исходный CSS-код, который хорошо работает в моем приложении Rails 3 в локальном хосте и производстве.

background: url(/assets/landingpage2.jpg); width: 574px; height: 650px;

background: url(../assets/landingpage2.jpg); width: 574px; height: 650px;

background-image: url(../assets/landingpage2.jpg); width: 574px; height: 650px;

background-image: url("../assets/landingpage2.jpg"); width: 574px; height: 650px;

background-image: url("/assets/landingpage2.jpg"); width: 574px; height: 650px;

Вот класс, который включает в себя исходный оператор фона:

.landing-cube-menu {
  font-weight: bold; 
  font-size: 150%;
  line-height: 100%;    
  background: url(/assets/landingpage2.jpg); width: 574px; height: 650px;
  margin:0 auto;  
}

Вот код, который я использую на мой взгляд:

<div class="header-cube-menu" style="position: relative;">

  <div class="header-store" style="position: absolute;">
    <p><%= link_to "Online Store", store_path %></p>
  </div>

  <div class="header-about" style="position: absolute;">
    <p><%= link_to "About", about_path %></p>
  </div>

  <div class="header-contact" style="position: absolute;">
    <p><%= link_to "Contact", contact_path %></p>
  </div>

  <div class="header-verse" style="position: absolute;">
    <p><a href="/verse">Bible<br>Verse</a></p>
  </div>

  <div class="header-app" style="position: absolute;">
    <p><a href="/app">Mobile<br>&nbsp;&nbsp;App</a></p>
  </div>

  <div class="header-home" style="position: absolute;">
    <p><a href="/home">Home<br>&nbsp;Page</a></p>
  </div>

  <div class="header-math" style="position: absolute;">
    <p><a href="/math">The<br>Math</a></p>
  </div>

  <div class="header-vision" style="position: absolute;">
    <p><a href="/vision">&nbsp;Vision<br>Mission</a></p>
  </div>

  <div class="header-pendant" style="position: absolute;">
    <p><a href="/pendant">Pendant<br>&nbsp;&nbsp;&nbsp;Desk Cross<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and more</a></p>
  </div>

  <div class="header-puzzle" style="position: absolute;">
    <p><a href="/puzzle">3D-Puzzle<br>&nbsp;&nbsp;eBook</a></p>
  </div>

</div>

Я очистил кеш в своем браузере как для localhost, так и для моего домена. Я все еще вижу изображение в localhost, но не с доменом. Я попытался использовать последнюю версию Safari, Chrome, Firefox и Opera на моем Mac Mini Server. Все они получают одинаковые результаты.

Я мог понять это, если бы не видел фоновое изображение в localhost. Я тестировал приложение Rails 4 с помощью localhost и предположил, что он будет работать на производстве. Однако после того, как я развернул его, фоновое изображение отсутствовало. Это происходит на обоих моих серверах производства и разработки. Файл изображения находится в приложении/активах/изображениях на обоих серверах.

Мой исходный код и все приведенные здесь примеры верны, поскольку изображение отображается в localhost. Я понятия не имею, где проверить на данный момент. Я могу опубликовать это в Пассажирской Группе Google. Это единственная другая переменная между localhost и production, особенно с учетом моего сервера разработки.

ОБНОВЛЕНИЕ: Я решил попробовать другие возможности после того, как я разместил это. Теперь фоновое изображение больше не отображается для localhost. Я полностью разочарован этим.

Любая помощь будет оценена.

ОБНОВЛЕНИЕ 10/19/2013 8:05 вечера CDT GMT-5

Я попытался реализовать решение asset_url в моем файле .less. Вот ошибки, которые я получил, когда я сделал rake assets: precompile RAILS_ENV = production команда

I, [2013-10-19T19:59:05.384878 #69440]  INFO -- : Writing /Users/myusername/Sites/myrailsapp/public/assets/application-f8821f5601f793a09e9373fb397df1b1.js
    rake aborted!
    undefined method `[]' for nil:NilClass
      (in /Users/myusername/Sites/hypercubeoflove_RoR_4/app/assets/stylesheets/application.css)
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/sass_functions.rb:63:in `sprockets_context'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-rails-4.0.0/lib/sass/rails/helpers.rb:23:in `asset_url'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/script/funcall.rb:112:in `_perform'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/script/node.rb:40:in `perform'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `map'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `map'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/base.rb:37:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:100:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/visitors/perform.rb:7:in `visit'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/tree/root_node.rb:20:in `render'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/engine.rb:315:in `_render'
    /Users/myusername/.rvm/gems/[email protected]/gems/sass-3.2.12/lib/sass/engine.rb:262:in `render'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/sass_compressor.rb:24:in `evaluate'
    /Users/myusername/.rvm/gems/[email protected]/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/context.rb:197:in `block in evaluate'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `each'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `evaluate'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/bundled_asset.rb:25:in `initialize'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `new'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `build_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/index.rb:94:in `block in build_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/caching.rb:58:in `cache_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/index.rb:93:in `build_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/base.rb:287:in `find_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/index.rb:61:in `find_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:211:in `block in find_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:257:in `benchmark'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:210:in `find_asset'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:119:in `block in compile'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `each'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `compile'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:60:in `block (3 levels) in define'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-2.10.0/lib/rake/sprocketstask.rb:146:in `with_logger'
    /Users/myusername/.rvm/gems/[email protected]/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:59:in `block (2 levels) in define'
    /Users/myusername/.rvm/gems/[email protected]/bin/ruby_noexec_wrapper:14:in `eval'
    /Users/myusername/.rvm/gems/[email protected]/bin/ruby_noexec_wrapper:14:in `<main>'
    Tasks: TOP => assets:precompile
    (See full trace by running task with --trace)

Ответ 1

Ваша проблема почти наверняка связана с rake assets:precompile и вашей производственной средой

Хорошим тестом будет Right-Click > View Source в вашем рабочем приложении и нажмите на файл CSS, в котором вызывается фоновое изображение. Если ваша проблема заключается в том, что ваш CSS вызывает url ( "background-image.png" ), и когда вы нажимаете на файл, он не отображается, решение заключается в использовании SCSS для динамического разбиения активов

Предварительная компиляция активов с помощью SCSS

У нас возникла проблема, когда вы не могли получить доступ к файлам изображений в CSS и обнаружили, что это связано с тем, что CSS ссылался только на места статического url(); и в precompile наше приложение вызывало образы "backgroun-image-234234nsdfasfdjasdfk2jij234ij32i.png"

Способ исправления: использовать SCSS для создания динамических ссылок на активы; позволяя вашему приложению установить правильный путь к изображениям и т.д. Вот какой код:

#application.css.scss (yes, you need to rename it)
@import 'layout/body'


#app/assets/stylesheets/layout/body.css.scss
body {
    background: asset_url('background-image.png')
}

Если вы это сделаете, а затем, когда вы нажимаете на производство, вы выполняете эти команды, он должен работать:

rake assets:precompile RAILS_ENV=production

Ответ 2

Fwiw, я просто изменил имя файла css, который ссылался на фоновое изображение от styleblah.css до styleblah.css.scss, а затем изменил background: url('/assets/images/imagetitle.png'); на background: asset_url('imagetitle.png'); и работал отлично.

Как говорит мужчина, запустите что-то в этих строках: rake assets:precompile RAILS_ENV=production

затем перезагрузите свой веб-сервер/http-сервер (в моем случае единорог) для хорошей меры: sudo service unicorn restart