C'è uno strano problema con Rails 4 su Heroku. Quando le immagini vengono compilate, vengono aggiunti degli hash, ma il riferimento a quei file dall'interno dei CSS non ha il nome corretto. Ecco cosa intendo. Ho un file chiamato logo.png. Tuttavia quando appare su heroku viene visualizzato come:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Tuttavia il CSS afferma ancora:

background-image:url("./logo.png");

Il risultato: l'immagine non viene visualizzata. Qualcuno si imbatte in questo? Come può essere risolto?

I pignoni insieme a Sass hanno alcuni utili aiutanti che puoi usare per portare a termine il lavoro. Pignoni saranno solo elaborano questi aiutanti se le estensioni di file foglio di stile sono o .css.scsso .css.sass.

Assistente specifico per l'immagine:

background-image: image-url("logo.png")

Aiuto agnostico:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

O se si desidera incorporare i dati dell'immagine nel file CSS:

background-image: asset-data-url("logo.png")

Non so perché, ma l'unica cosa che ha funzionato per me era usare asset_path invece di image_path , anche se le mie immagini sono nella directory assets / images / :

Esempio:

app/assets/images/mypic.png

In Ruby:

asset_path('mypic.png')

In .scss:

url(asset-path('mypic.png'))

AGGIORNARE:

Capito che risulta che questi aiutanti di risorse provengono dalla gemma sass-rails (che avevo installato nel mio progetto).

In Rails 4, puoi fare facilmente riferimento a un'immagine che si trova assets/images/nei tuoi .SCSSfile in questo modo:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

Quando avvii l'applicazione in modalità di sviluppo ( localhost:3000), dovresti vedere qualcosa del tipo:

background-image: url("/assets/pretty-background-image.jpg");

In modalità produzione, le risorse avranno i numeri di supporto della cache:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

L'hash è perché la pipeline di risorse e il server Ottimizza la memorizzazione nella cache http://guides.rubyonrails.org/asset_pipeline.html

Prova qualcosa del genere:

 background-image: url(image_path('check.png'));

In bocca al lupo

Nel css

background: url("/assets/banner.jpg");

sebbene il percorso originale sia /assets/images/banner.jpg, per convenzione devi aggiungere solo / assets / nel metodo url

Nessuna delle risposte dice come, quando avrò l' .css.erbestensione, come fare riferimento alle immagini . Per me ha lavorato sia nella produzione che nello sviluppo :

2.3.1 CSS ed ERB

La pipeline degli asset valuta automaticamente ERB . Ciò significa che se aggiungi un'estensione erb a una risorsa CSS (ad esempio, application.css.erb), allora gli helper come asset_pathsono disponibili nelle tue regole CSS:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Questo scrive il percorso della specifica risorsa a cui si fa riferimento. In questo esempio, sarebbe logico disporre di un'immagine in uno dei percorsi di caricamento delle risorse, ad esempio app/assets/images/image.png, a cui fare riferimento qui. Se questa immagine è già disponibile public/assetscome file con impronta digitale, viene fatto riferimento a quel percorso.

Se si desidera utilizzare un URI di dati, un metodo per incorporare i dati di immagine direttamente nel file CSS , è possibile utilizzare l' asset_data_urihelper.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Ciò inserisce un URI di dati correttamente formattato nell'origine CSS.

Nota che il tag di chiusura non può essere dello stile -%>.

Solo questo frammento non funziona per me:

background-image: url(image_path('transparent_2x2.png'));

Ma rinominare stylename.scss in stylename.css.scss mi aiuta.

Facendo riferimento ai documenti di Rails , vediamo che ci sono alcuni modi per collegarsi alle immagini dal CSS. Vai alla sezione 2.3.2.

Innanzitutto, assicurati che il tuo file css abbia l'estensione .scss se è un file sass.

Successivamente, puoi utilizzare il metodo ruby, che è davvero brutto:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Oppure puoi usare il modulo specifico più bello:

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

Infine, puoi utilizzare il modulo generale:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

COSA HO TROVATO DOPO ORE DI MUCKING CON QUESTO:

LAVORI :

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

Quanto sopra produce qualcosa di simile: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Notare il "/" iniziale ed è tra virgolette . Nota anche l' estensione scss e l'helper image_path in yourstylesheet.css.scss. L'immagine si trova nella directory app / assets / images .

Non funziona:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

non funziona, proprietà non valida:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

La mia ultima risorsa sarebbe stata quella di metterli nel mio secchio s3 pubblico e caricarli da lì, ma alla fine riuscì a fare qualcosa.

È interessante notare che se uso "immagine di sfondo", non funziona:

background-image: url('picture.png');

Ma solo "background", fa:

background: url('picture.png');

In alcuni casi può anche essere utile quanto segue

logo {background: url (<% = asset_data_uri 'logo.png'%>)}

Fonte: http://guides.rubyonrails.org/asset_pipeline.html

Quando si usa gem 'sass-rails', in Rails 5, bootstrap 4, per me ha funzionato quanto segue,

nel file .scss:

    background-image: url(asset_path("black_left_arrow.svg"));

nel file di visualizzazione (ad esempio .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

Questo dovrebbe portarti lì ogni volta.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

Per impostazione predefinita, Rails 4 non servirà le tue risorse. Per abilitare questa funzionalità è necessario andare in config / application.rb e aggiungere questa riga:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

In Rails 4, usa semplicemente

.hero { background-image: url("picture.jpg"); }

Puoi aggiungere l'estensione css .erb. Ej: style.css.erb

Quindi puoi mettere:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

Questo ha funzionato per me:

background: #4C2516 url('imagename.png') repeat-y 0 0;