Rails 4 - Hintergrundbild erscheint in Localhost aber nicht in Produktion

Ich habe vor kurzem eine meiner Rails 3.2.13 Anwendungen umgeschrieben, um Rails 4 zu verwenden. Ich habe twitter-bootstrap-rails 2.1.2 in meiner Rails 3 Anwendung verwendet. Als ich die Rails 4-Version neu geschrieben habe, habe ich Version 2.2.8 verwendet. Ich verwende Phusion Passenger 4.0.20 auf meinen Entwicklungs- und Produktionsservern, um alle meine Rails-Anwendungen zu hosten.Rails 4 - Hintergrundbild erscheint in Localhost aber nicht in Produktion

In meiner Rails 3 Anwendung erschien das Hintergrundbild korrekt in localhost und in der Produktion. Als ich jedoch die Anwendung mit Rails 4 und der aktuellen Version von twitter-bootstrap-rails neu schrieb, bemerkte ich, dass das Hintergrundbild korrekt angezeigt wird, aber wenn ich es in der Produktion einsetze, wird das Hintergrundbild nicht angezeigt.

Ich habe versucht, die folgende CSS, aber das Hintergrundbild erscheint nur in localhost. Die erste Anweisung ist der ursprüngliche CSS-Code, der in meiner Rails 3-Anwendung in localhost und Produktion gut funktionierte.

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;

Hier ist die Klasse, die den Hintergrund Anweisung, die ursprünglich gearbeitet beinhaltet:

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

Hier ist der Code, den ich in meiner Sicht bin mit:

<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>

ich die gelöscht haben Cache in meinem Browser sowohl für localhost als auch für meine Domain. Ich sehe immer noch das Bild in localhost, aber nicht mit der Domäne. Ich habe versucht, die neueste Version von Safari, Chrome, Firefox und Opera auf meinem Mac Mini Server zu verwenden. Alle von ihnen bekommen die gleichen Ergebnisse.

Ich konnte das verstehen, wenn ich das Hintergrundbild in localhost nicht sah. Ich habe meine Tests für die Rails 4 App mit localhost gemacht und angenommen, dass es in der Produktion funktionieren würde. Aber nachdem ich es bereitgestellt hatte, fehlte das Hintergrundbild. Dies geschieht sowohl auf meinen Produktions- als auch auf meinen Entwicklungsservern. Die Image-Datei befindet sich in App/Assets/Images auf beiden Servern.

Mein ursprünglicher Code und alle Beispiele, die ich hier gepostet habe, sind korrekt, da das Bild in localhost angezeigt wird. Ich habe keine Ahnung, wo ich an dieser Stelle nachsehen kann. Ich kann dies in der Passagier-Google-Gruppe veröffentlichen. Das ist die einzige andere Variable zwischen localhost und production, besonders unter Berücksichtigung meines Entwicklungsservers.

UPDATE: Ich habe mich entschieden, andere Möglichkeiten auszuprobieren, nachdem ich das gepostet habe. JETZT erscheint das Hintergrundbild nicht mehr für localhost. Ich bin total frustriert.

Jede Hilfe wäre willkommen.

UPDATE 2013.10.19 20.05 CDT GMT-5

ich versuchte, die asset_url Lösung in meiner .Weniger Datei zu implementieren. Hier sind die Fehler, die ich bekam, als ich habe die Rake Vermögen: precompile RAILS_ENV = Produktion Befehl

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/ruby-2.0.0-[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)

Quelle

2013-10-19 Pamela Cook - LightBe Corp

Wenn Sie die ../assets entfernen und Ersetzen durch/Assets, wie Sie es ursprünglich hatten, starten Sie Ihren Server neu (nur für den Fall, dass Sie zwischenspeichern) und den Cache in Ihrem Browser ablegen, wird das Image in der Entwicklung erneut geladen? – trh

Ich habe den Browser zurückgesetzt, den Cache geleert und meinen Mac Mini Server neu gestartet. Das Bild wird nicht angezeigt. Vielleicht hatte ich Cache für all diese Tage, als ich Localhost lief. Jetzt sehe ich das Hintergrundbild an dieser Stelle überhaupt nicht mehr. –

Kompilieren Sie die Assets mit Digest? Wenn ja, kann es nicht funktionieren, weil es ein Problem mit 'croppet-rails' gibt https://github.com/rails/sprockers-rails/issues/49 Sie können versuchen - https://github.com/alexspeller/ non-dummy-digest-assets – swapab

Ihr Problem mit an Sicherheit grenzender Wahrscheinlichkeit mit rake assets:precompile & Produktionsumgebung

Ein guter Test zu tun sein wird Klicken Sie in Ihrer Produktions-App auf Right-Click > View Source und klicken Sie auf die CSS-Datei, in der Ihr Hintergrundbild aufgerufen wird. Wenn Ihr Problem ist, ruft Ihr CSS URL auf ("background-image.png ") &, wenn Sie auf die Datei klicken, es zeigt nicht, ist die Lösung SCSS zu verwenden, um die Vermögenswerte dynamisch Mit SCSS

Vorkompilieren Die Vermögenswerte vorzukompilieren

Wir hatten das Problem Sie konnten nicht auf die Bilddateien im CSS zugreifen und fanden, dass dies darauf zurückzuführen war, dass das CSS nur auf statische url() - Speicherorte referenzierte, und in der Vorkompilierung rief unsere App images "backgroun-image-234234nsdfasfdjasdfk2jij234ij32i.png"

auf

Der Weg, um das zu beheben, ist use SCSS, um dynamische Links zu den Assets zu erstellen; so dass Ihre Anwendung den richtigen Pfad zu den Bildern setzen, usw. Hier einige Live-Code:

#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') 
}

Wenn Sie dies tun, und dann, wenn Sie die Produktion drücken, führen Sie diese Befehle, es sollte funktionieren:

rake assets:precompile RAILS_ENV=production

Quelle

2013-10-19 09:46:50

Mit der Verwendung des Gem ist alle meine CSS-Code in bootstrap_and_overrides.css.less. Ich verwende keine application.css. Kann ich das, was Sie gerade erwähnen, nur für den Abschnitt implementieren, in dem ich auf das Hintergrundbild referenziere, und den Rest des Codes in bootstrap_and_overrides.css.less belassen, wo ich viel WENIGER Code habe? –

.less wird vom "racks" -Compiler von Rails unterstützt (http://StackOverflow.com/questions/7341676/using-less-in-a-rails-3-1-app), was bedeutet, dass Sie dasselbe erhalten Ergebnisse durch Anwenden der "Asset_url" Sachen auf Ihre .less Dateien –

Ich versuchte die Asset_url Lösung in meiner .less Datei. Wenn ich Assets rake: Vorkompilieren ohne die Umgebung wurde der Befehl ohne Fehler ausgeführt. Wenn ich Assets rake: precompile RAILS_ENV = production (das erste Mal, dass ich die Umgebung eingebunden habe) eine 'Writing'-Anweisung für alle Bilder in Assets/Images, die den Prozess abgebrochen haben.Ich habe das Fehlerprotokoll beginnend mit der letzten "Writing" -Anweisung hinzugefügt. –

FWIW, ich habe gerade den Namen der CSS-Datei, die styleblah.css-styleblah.css.scss das Hintergrundbild referenziert geändert dann background: url('/assets/images/imagetitle.png');-background: asset_url('imagetitle.png'); und es funktionierte perfekt.

Wie der Mann sagt, etwas in dieser Richtung laufen: rake assets:precompile RAILS_ENV=production

dann Ihre Web/HTTP-Server (in meinem Fall Einhorn) für eine gute Maßnahme neu starten: sudo service unicorn restart

Quelle

2014-01-17 08:59:26 user2398041

mit demselben Problem, Kannst du bitte deine prodction.rb-Datei einfügen? Ist config.assets.compile wahr? –

Es tut mir leid, davon zu hören - Ich habe die Standardkonfiguration von production.rb für meine App rails 4 nicht geändert (abgesehen von der Einrichtung von Mandrill); config.assets.compile wird auf false gesetzt: 'config.assets.compile = false '. Sie finden meine vollständige production.rb-Datei hier: [Production.rb on Github] (https://github.com/ryparty/productionrb/blob/master/production.rb). Stellen Sie sicher, dass Sie den Pfad in Ihrem .css.scss-Dokument nur in den Namen des Bildes und auch in den Bereich, in dem Sie Ihr Bild platzieren, ändern? Ich lerne auch, aber ich sehe nicht, warum es nicht funktionieren würde. – user2398041

Rails 4 - Hintergrundbild erscheint in Localhost aber nicht in Produktion

Antwort

Verwandte Themen