2013-10-19 38 views
11

我最近重寫了我的一個Rails 3.2.13應用程序使用Rails 4.我在我的Rails 3應用程序中使用了twitter-bootstrap-rails 2.1.2。當我重寫Rails 4版本時,它開始使用2.2.8版本。我在我的開發和生產服務器上使用Phusion Passenger 4.0.20來託管我所有的Rails應用程序。Rails 4 - 背景圖像出現在本地主機,但不在生產

在我的Rails 3應用程序中,背景圖像在localhost和production中正確顯示。但是當我使用Rails 4和當前版本的twitter-bootstrap-rails重寫應用程序時,我注意到背景圖像正確顯示,但是當我在生產環境中部署它時,背景圖像不顯示。

我試過下面的CSS,但背景圖片只出現在本地主機上。第一個聲明是在本地主機和生產環境中的Rails 3應用程序中運行良好的原始CSS代碼。

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中看到圖像,但不在域中看到。我曾嘗試在我的Mac Mini服務器上使用最新版本的Safari,Chrome,Firefox和Opera。他們都得到相同的結果。

我可以理解,如果我沒有看到localhost中的背景圖像。我使用localhost測試了Rails 4應用程序,並假定它可以在生產環境中工作。但是,我部署它後,背景圖像丟失。我的生產和開發服務器上都發生這種情況。圖像文件位於兩臺服務器上的應用/資產/圖像中。

我的原始代碼和我在這裏發佈的所有示例都是正確的,因爲圖像顯示在localhost中。我不知道該在哪裏檢查。我可能會在Passenger Google Group中發佈此信息。這是localhost和生產之間唯一的其他變量,特別是考慮到我的開發服務器。

更新:我發佈這個後決定嘗試其他的可能性。現在,背景圖像不再出現在本地主機上。我對此感到非常沮喪。

任何幫助,將不勝感激。

UPDATE二零一三年十月十九日8:05 PM CDT GMT-5

我試圖實現我的.LESS文件ASSET_URL解決方案。下面是我做的耙資產給我的錯誤:預編譯RAILS_ENV =生產命令

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/r[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

如果刪除../assets和與替換/資產,你原來有,請重新啓動服務器(以防萬一你緩存),並轉儲緩存在瀏覽器中,再不會像負荷發展? – trh

+0

我重置瀏覽器,清除緩存並重新啓動我的Mac Mini服務器。圖像未顯示。也許我在運行本地主機時有緩存。現在我只是沒有看到背景圖像。 –

+1

您是否在編譯具有摘要的資產? 如果是的,它可能無法正常工作宣漢問題與'鏈輪rails' https://github.com/rails/sprockets-rails/issues/49 你可以試試 - https://github.com/alexspeller/非愚蠢的消化資產 – swapab

回答

23

你幾乎肯定會與rake assets:precompile &生產環境

做的問題的一個很好的考驗將是到您的製作應用程序中的Right-Click > View Source,然後單擊調用背景圖像的CSS文件。如果你的問題是你的CSS正在調用url(「background-image。PNG「)&當你點擊到文件,它不顯示,該解決方案是使用SCSS預編譯的資產動態


預編譯的資產使用SCSS

我們有問題在那裏你不能訪問CSS中的圖像文件,並發現這是因爲CSS僅引用靜態url()位置;而在預編譯中,我們的應用程序正在調用圖像「backgroun-image-234234nsdfasfdjasdfk2jij234ij32i.png」

修復方法是use 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 
+0

使用gem,我所有的css代碼都在bootstrap_and_overrides.css.less中。我沒有使用application.css。我可以實現你提什麼只是這裏我引用的背景圖像和離開bootstrap_and_overrides.css.less的代碼的其餘部分在那裏我有很多的更少的代碼段? –

+0

.LESS由Rails的「鏈輪」的編譯器(http://stackoverflow.com/questions/7341676/using-less-in-a-rails-3-1-app),這意味着你會得到同樣的支持從應用「ASSET_URL」的東西你.LESS文件 –

+0

結果我試圖在我的.LESS文件ASSET_URL解決方案。當我做rake資產時:在沒有環境的情況下進行預編譯,執行的命令沒有錯誤。當我執行rake資產時:預編譯RAILS_ENV =生產(第一次包括環境)爲資產/映像中的所有映像發佈了「寫入」聲明,該流程終止。我添加了最後一個'Writing'語句開始的錯誤日誌。 –

10

FWIW,我只是改變了所引用的背景圖像從styleblah.cssstyleblah.css.scss再變background: url('/assets/images/imagetitle.png');background: asset_url('imagetitle.png'); CSS文件的名稱,它完美地工作。

喜歡的那個男人說,運行這些方針的東西:rake assets:precompile RAILS_ENV=production

良好的措施,然後重新啓動Web/HTTP服務器(在我的情況麒麟):sudo service unicorn restart

+0

有同樣的問題,你可以請把你的prodction.rb文件。 config.assets.compile是真的嗎? –

+1

嗨,很抱歉聽說它 - 我沒有更改我的rails 4應用程序的默認production.rb配置(除了設置mandrill); config.assets.compile設置爲false:'config.assets.compile = false'。你可以在這裏找到我的完整production.rb文件:[Github上的Production.rb](https://github.com/ryparty/productionrb/blob/master/production.rb)。您是否確保將.css.scss文檔中的路徑更改爲圖像的名稱以及放置圖像的位置?我也在學習,但我不明白爲什麼它不起作用。 – user2398041

相關問題