Rails 4 image-path, image-url ve asset-url artık SCSS dosyalarında çalışmıyor


99

image-urlRails 4'te ve diğerlerinden başka bir şey mi kullanmamız gerekiyor ? Mantıklı görünmeyen farklı değerler döndürürler. Ben varsa logo.pngiçinde /app/assets/images/logo.pngve ben aşağıdakileri yapın bu ne alıyorum:

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

Tabii bunların hiçbiri işe yaramıyor çünkü en azından /assetsön tarafta olması gerekiyor .

GÜNCELLEME : Aslında yeni fark ettim, Rails 4'teki resimlere nasıl erişebilirim? Adresinde bir resmim var/app/assets/images/logo.png. Ancak aşağıdaki URL'lerden herhangi birine gidersem yine de resmimi göremiyorum:

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

GÜNCELLEME 2 : Getirebilmemin tek yolulogo.pngonu/app/assets/stylesheetsdizinetaşımakve ardından yukarı çekmek:

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

Deneyin:asset_path("logo.png", image)
— Marcelo De Polli

@depa - basitçe "/logo.png" biçimine dönüştürüldü, bu benim resmimi getirmiyor.
— içinde.

3
Bu yardımcıyı bir .cssdosyanın içinde mi yoksa bir dosyanın içinde mi kullanıyorsunuz .css.scss?
— Marcelo De Polli

@depa - herhangi bir yardımcı kullanmamak. Sanırım bu, resimler klasörüm için çalışmayan daha büyük bir varlık sorunu
— içinde.

1
@depa - ne istediğini anladım. Bir .css.scssdosyanın içinde
— içinde.

Yanıtlar:


113

Bu sorunu yeni yaşadım. Yardımcı olacağını umduğumuz 3 nokta:

  • Dizininize resim yerleştirirseniz app/assets/images, yolda önek olmadan resmi doğrudan çağırabilmeniz gerekir. yani.image_url('logo.png')
  • Varlığı nerede kullandığınıza bağlı olarak, yönteme bağlı olacaktır. Bir background-image:mülk olarak kullanıyorsanız , kod satırınız olmalıdır background-image: image-url('logo.png'). Bu hem daha az hem de sass stil sayfaları için işe yarar. Görünümde satır içi kullanıyorsanız image_tag, görüntünüzün çıktısını almak için raylardaki yerleşik yardımcıyı kullanmanız gerekecektir . Bir kez daha, ön ek yok<%= image_tag 'logo.png' %>
  • Son olarak, varlıklarınızı önceden derliyorsanız, varlıklarınızı rake assets:precompileoluşturmak için çalıştırın veya rake assets:precompile RAILS_ENV=productionüretim için çalıştırın , aksi takdirde, üretim ortamınız sayfayı yüklerken parmak izli varlıklara sahip olmayacaktır.

Ayrıca 3. noktadaki bu komutlar için, bundle execeğer paketleyici çalıştırıyorsanız bunların önüne koymanız gerekecektir .


1
Diğer bir nokta da dokümantasyon kılavuzlarını okumaktır . Rubyonrails.org/asset_pipeline.html . Ayrıca, görüntülerin yüklenip yüklenmediğini tarayıcınızın Web Geliştirici Hata Ayıklamasında görebiliyor musunuz?
— H.Rabiee

3
Şimdi böyle bir cevap yazarsın. Her senaryo. "Olursa ne olur" u tahmin etmek, boşa gitmemek. "Çatışmayı görmüş" (sorunu gerçekten çözmüş olan) birinin işareti.
— ahnbizcad

RAILS_ENV = üretimini birkaç kez kaçırarak ısırıldım.
— Sixty4Bit

62

İlk formülünüz image_url('logo.png')doğrudur. Görüntü bulunursa, yolu oluşturacaktır /assets/logo.png(artı üretimde bir karma). Ancak, Rails adlandırdığınız görüntüyü bulamazsa, geri dönecektir /images/logo.png.

Sonraki soru şudur: Rails neden resminizi bulamıyor? Bunu app / assets / images / logo.png içine koyarsanız, adresine giderek erişebilmelisiniz http://localhost:3000/assets/logo.png.

Bu işe yarıyorsa, ancak CSS'niz güncellenmiyorsa, önbelleği temizlemeniz gerekebilir. tmp/cache/assetsProje dizininizden silin ve sunucuyu yeniden başlatın (webrick, vb.).

Bu başarısız olursa, sadece background-image: url(logo.png);Bu seçeneğini kullanmayı da deneyebilirsiniz , CSS'nizin aynı göreceli yola sahip dosyaları aramasına neden olur (bu durumda bu, / assets).


2
Sırf buna atlamak için, resim yolunda tek tırnak yerine çift tırnak kullanarak ısırıldım. Css / scss dosyalarındaki varlık yardımcıları ile tek tırnak işaretlerini çok kullanırsınız.
— d_ethier

"tanımsız yerel değişken veya yöntem` `resmi '' alıyorum
— Muhammed Umer

Resim kelimesinin önüne yanlışlıkla bir boşluk koymanız mümkün mü?
— Nick Urban

10

asset_urlYardımcı kullanarak bu sorunu çözdüğünü yeni öğrendim .

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

undefined local variable or method 'image'Hata aldım .
— Penguin

Belki raylarda bir şey değişti, bu cevap eski! Deneyebilirsinizasset_path("<your_path>", type: :image)
— Leftis

8

Satır içi css ile bir arka plan resmi eklemeye çalışırken benzer bir sorun yaşadım. Varlık senkronizasyonunun çalışma şekli nedeniyle görüntüler klasörünü belirtmenize gerek yoktur.

Bu benim için çalıştı:

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

Teşekkürler, yapıyordum assets/img.jpgya ../assets/img.jpgda belli ki hiçbir dizinde çalışmıyor. /assets/img.jpgyapar. TY
— ElliotM

5

Rails 4.0.0, image-urlcss dosyanızla aynı dizin yapısında tanımlanmış görüntüye bakacaktır .

Örneğin, css'iniz girerse assets/stylesheets/main.css.scss, image-url('logo.png')olur url(/assets/logo.png).

Css dosyanızı 'a taşırsanız assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')olur /assets/cpanel/logo.png.

Görüntüyü doğrudan varlıklar / görüntüler dizininin altında kullanmak istiyorsanız, asset-url('logo.png')


5

stil sayfaları için: url (varlık_yolu ('resim.jpg'))


3
Ne arasındaki temel fark url(asset_path('image.jpg'), url('image.jpg')ve image-url('image.jpg')? Ben çalışıyorum Raylar 5.0.0.1 ve url()içinde para cezasını işleri SCSS dosya ve içinde html.erb dosyaları kullandığım asset_path()gitmem doğru yolu bilmek istiyorum böylece. Şimdiden teşekkürler.
— alexventuraio

asset_pathgörüntü dosyasına bir özet ek ekleyin. Aslında üretim içindir, her dağıtımdan sonra bir özet eki değiştirilecek ve kullanıcının tarayıcısı görüntülerin yeni sürümünü indirecektir.
— Alex Kojin
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.