Rails Bilder und Vermögenswerte, die nicht sind richtig

Question

Zum Beispiel in meiner Rails-Anwendung geladen Ich habe so etwas wie:

.wax_seal { 
    background: url("wax-seal-small.png"); 
    display: block; 
    height: 100px; 
    margin: 0 auto; 
    width: 92px; 
} 

.wax_seal:active { 
    background: url('wax-seal-small-broken.png'); 
} 

Und in meiner config/environments/production.rb Datei:

# Disable Rails's static asset server (Apache or nginx will already do this). 
config.serve_static_assets = true 

ich die Erstellung von Vermögenswerten manuell aufrufen :

bundle exec rake assets:precompile 

und die Dateien werden mit Hashes am Ende des Namens erstellt:

wax-seal-small-Uuhqwduhqwdoi234983jewf.png 

---

So funktioniert das nicht:

background: url("wax-seal-small.png"); 

Aber das funktioniert gut (wenn ich manuell Typ es in Chrome):

background: url("wax-seal-small-Uuhqwduhqwdoi234983jewf.png"); 

---

Welchen Schritt vermisse ich hier? Wie kann ich meine CSS-Regeln in diesem kleinen Hash hinzufügen?

Hinzufügen von config.assets.compile = true in config/environments/production.rb macht es funktioniert, aber ich habe in der Rails-Guide gelesen, dass es eine schlechte Übung aufgrund der erheblichen Leistungseinbußen ist.

Answer 1

fand ich dies in edgerails Dokumentation: http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS und Sass

Wenn die Asset-Pipeline, Wege zu Vermögen muss neu geschrieben und -url Sass-Schienen liefert werden und -path-Helfer (in Sass mit Bindestrich versehen, in Ruby unterstrichen) für die folgenden Asset-Klassen: Bild, Schriftart, Video, Audio, JavaScript und Stylesheet.

• image-url("rails.png") becomes url(/assets/rails.png)
• image-path("rails.png") becomes "/assets/rails.png"

Die allgemeinere Form kann auch verwendet werden, aber der Vermögenswert Pfad und Klasse müssen beide angegeben werden:

• asset-url("rails.png", image) becomes url(/assets/rails.png)
• asset-path("rails.png", image) becomes "/assets/rails.png"

Answer 2

Wenn Sie mit sass oder weniger können Sie background: image-url("wax-seal-small.png");

verwenden, die den Pfad zur Datei vorangestellt wird und die Cache-buster Hash anhängen.

Andernfalls verweisen Sie einfach auf das Verzeichnis/assets. Z.B. background: url("/assets/wax-seal-small.png");