Rails 4 image-path, image-url e asset-url non funzionano più nei file SCSS

99

Dovremmo usare qualcos'altro a parte image-urle altri in Rails 4? Restituiscono valori diversi che non sembrano avere senso. Se ho logo.pngin /app/assets/images/logo.pnge faccio la seguente, questo è quello che ottengo:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Ovviamente nessuno di questi funziona perché hanno bisogno almeno /assetsdi fronte.

AGGIORNAMENTO : In realtà, ho appena notato, come accedo alle immagini in Rails 4? Ho un'immagine in/app/assets/images/logo.png. Ma se vado a uno dei seguenti URL, non vedo ancora la mia immagine:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

AGGIORNAMENTO 2 : L'unico modo in cui posso richiamare il miologo.pngè spostandolo nella/app/assets/stylesheetsdirectory e quindi tirandolo su:

http://localhost:3000/assets/logo.png

ruby-on-rails asset-pipeline ruby-on-rails-4

— a.
fonte

Prova questo:asset_path("logo.png", image)

— Marcelo De Polli

@depa - che è stato semplicemente convertito in "/logo.png", che non fa apparire la mia immagine.

— a.

3

Stai usando quell'helper all'interno di un .cssfile o in un .css.scssfile?

— Marcelo De Polli

@depa: non si utilizza alcun aiuto. Penso che questo sia un problema più grande delle risorse che non funzionano per la mia cartella delle immagini

— in.

1

@depa - oh capisco cosa stai chiedendo. È all'interno di un .css.scssfile

— in.

113

Ho appena avuto questo problema da solo. 3 punti che si spera aiuteranno:

Se metti delle immagini nella tua app/assets/imagesdirectory, dovresti essere in grado di chiamare l'immagine direttamente senza prefisso nel percorso. cioè.image_url('logo.png')
A seconda di dove si utilizza l'asset dipenderà dal metodo. Se lo stai usando come background-image:proprietà, la tua riga di codice dovrebbe essere background-image: image-url('logo.png'). Funziona sia per i fogli di stile less che per quelli sass. Se lo stai usando in linea nella vista, dovrai usare l' image_taghelper integrato in rails per produrre la tua immagine. Ancora una volta, nessun prefisso<%= image_tag 'logo.png' %>
Infine, se stai precompilando le tue risorse, esegui rake assets:precompileper generare le tue risorse o rake assets:precompile RAILS_ENV=productionper la produzione, altrimenti il tuo ambiente di produzione non avrà le risorse con impronte digitali durante il caricamento della pagina.

Anche per quei comandi al punto 3 dovrai bundle execanteporli se stai eseguendo bundler.

— cdaloisio
fonte

1

Un altro punto è leggere la documentazione guide.rubyonrails.org/asset_pipeline.html . Inoltre puoi vedere nel Web Developer Debug del tuo browser se le immagini vengono caricate?

— H.Rabiee

3

Ora è così che scrivi una risposta. Ogni scenario. Prevedere il "cosa succede se", senza questioni in sospeso. Un segno di qualcuno che ha "visto il combattimento" (ha davvero risolto il problema).

— ahnbizcad

Sono stato morso dalla mancanza di RAILS_ENV = produzione in diverse occasioni.

— Sixty4Bit

62

La tua prima formulazione,, image_url('logo.png')è corretta. Se l'immagine viene trovata, genererà il percorso /assets/logo.png(più un hash in produzione). Tuttavia, se Rails non riesce a trovare l'immagine che hai nominato, ricadrà /images/logo.png.

La domanda successiva è: perché Rails non trova la tua immagine? Se lo metti in app / assets / images / logo.png, dovresti essere in grado di accedervi andando su http://localhost:3000/assets/logo.png.

Se funziona, ma il tuo CSS non si aggiorna, potresti dover svuotare la cache. Elimina tmp/cache/assetsdalla directory del progetto e riavvia il server (webrick, ecc.).

Se fallisce, puoi anche provare a usare background-image: url(logo.png);Questo farà sì che il tuo CSS cerchi i file con lo stesso percorso relativo (che in questo caso è / assets).

— Nick Urban
fonte

2

Solo per saltare su questo, sono stato morso dall'uso di virgolette doppie sul percorso dell'immagine invece di virgolette singole. Usi molto le virgolette singole con gli helper delle risorse nei file css / scss.

— d_ethier

ricevo "variabile locale non definita o metodo` immagine '"

— Muhammad Umer

È possibile che tu abbia accidentalmente messo uno spazio prima della parola immagine?

— Nick Urban

10

Ho appena scoperto che usando l' asset_urlaiutante risolvi il problema.

asset_url("backgrounds/pattern.png", image)

— Leftis
fonte

Ho un undefined local variable or method 'image'errore.

— Penguin

Forse qualcosa è cambiato sui binari, questa risposta è vecchia! Puoi provareasset_path("<your_path>", type: :image)

— Leftis

8

Ho avuto un problema simile, cercando di aggiungere un'immagine di sfondo con CSS inline. Non è necessario specificare la cartella delle immagini a causa del modo in cui funziona la sincronizzazione delle risorse.

Questo ha funzionato per me:

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

— ykwx
fonte

Grazie, stavo facendo assets/img.jpgo ../assets/img.jpgche ovviamente non funziona in nessuna directory. /assets/img.jpgfa. TY

— ElliotM

5

Rails 4.0.0 apparirà come un'immagine definita image-urlnella stessa struttura di directory del file css.

Ad esempio, se il tuo css in assets/stylesheets/main.css.scss, image-url('logo.png')diventa url(/assets/logo.png).

Se sposti il tuo file css in assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')diventa /assets/cpanel/logo.png.

Se vuoi usare l'immagine direttamente nella directory assets / images, puoi usare asset-url('logo.png')

— kuntoaji
fonte

5

per i fogli di stile: url (asset_path ('image.jpg'))

— user2586863
fonte

3

Qual è la differenza principale tra url(asset_path('image.jpg'), url('image.jpg')e image-url('image.jpg')? Sto lavorando con Rails 5.0.0.1 e url()funziona bene nei file SCSS e nei file html.erb che uso, asset_path()quindi mi piacerebbe sapere come procedere. Grazie in anticipo.

— alexventuraio

asset_pathaggiungere al file immagine un'appendice digest. In realtà è per la produzione, dopo ogni distribuzione l'appendice di un digest verrà modificata e il browser dell'utente scaricherà la nuova versione delle immagini.

— Alex Kojin