immagini e risorse Rails non vengono caricati correttamente

Question

Per esempio, nella mia applicazione Rails ho qualcosa di simile:

.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'); 
} 

E nel mio file config/environments/production.rb:

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

invoco manualmente la compilazione dei beni :

bundle exec rake assets:precompile 

E i file vengono creati con hash alla fine del nome:

wax-seal-small-Uuhqwduhqwdoi234983jewf.png 

---

Quindi questo non funziona:

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

Ma questo funziona bene (quando ho manualmente tipo in Chrome):

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

---

Che passo mi manca qui? Come posso aggiungere le mie regole CSS in quel piccolo hash?

L'aggiunta di config.assets.compile = true in config/environments/production.rb lo fa funzionare, ma ho letto nella guida di Rails che è una cattiva pratica a causa di risultati significativi delle prestazioni.

Answer 1

ho trovato questo in edgerails documentazione: http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS e Sass

Quando si utilizza la pipeline di asset, percorsi di attività devono essere riscritti e Sass-Rails fornisce -url e -path helpers (sillabati in Sass, sottolineato in Ruby) per le seguenti classi di risorse: immagine, carattere, video, audio, JavaScript e foglio di stile.

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

La forma più generica può essere utilizzato anche, ma il percorso di asset e la classe deve essere specificato sia:

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

Answer 2

se si sta utilizzando sass o meno è possibile utilizzare background: image-url("wax-seal-small.png");

Che vi anteporre il percorso del file e aggiungere l'hash della cache blocchi.

Altrimenti basta fare riferimento alla directory/assets. Per esempio. background: url("/assets/wax-seal-small.png");