Raylar 3.1 ve Görüntü Varlıkları


156

Yönetici temam için tüm resimlerimi admin adlı bir klasördeki varlıklar klasörüne koydum. Sonra normal gibi bağlarım yani.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

Bilginize. Sadece test etmek için henüz öğelerimi derlemediğim için asset_path etiketini kullanmıyorum.

Bir görüntüyü güncellemeye karar verene kadar her şey yolunda. Bazı renkleri değiştirdim ama yeniden yüklendiğinde yeni tarz resim gösterilmiyor. Görüntüyü doğrudan tarayıcıda görüntülersem hala eski görüntüyü gösterir. Bir adım daha ileri giderek admin images klasörünü yok ettim. Ancak tüm görüntülerin hala görüntülenmekte olduğu hiçbir şeyi bozmadı. Ve evet önbelleğimi temizledim ve birden fazla tarayıcıda denedim.

Bir tür önbellekleme var mı? Bu sadece sayfalara hizmet etmek için pow kullanan yerel bir gelişmedir.

Görüntüler klasörünün tamamını yok etse bile görüntüler hala sunuluyor.

Bir şey mi kaçırıyorum?


2
3.1'in varlık boru hattını kullanması durum böyle değildir. Komut komisyon varlıklarını kullanırsınız: bu dosyaları sıkıştırıp herkese açık dosyaya taşıyacak precompile
Lee

2
Peki onları ortak klasöre taşımak çalıştı, hepsi biraz garip varlık klasöründen sunulan iyi çalıştı. Belki 3.1'de daha fazla doküman beklemek zorunda.
Lee

3
Hayal kırıklığınızı anlıyorum. Belli ki serbest bırakılan adaylar çok iyi belgelenmiyor.
tybro0103

1
Bunları varlıklarda bırakın, sadece bir klasör yolu eklemeyin. Cevabımı aşağıda görebilirsiniz.
Andrew

Yanıtlar:


226

3.1 de sadece yolun 'görüntüler' bölümü kurtulmak. Yani içinde yaşayan bir görüntüye /assets/images/example.pngbu url'den alma isteği ile erişilebilir./assets/example.png

Çünkü assets/imagesklasör yeni 3.1 uygulaması ile birlikte oluşturulan alır, bu muhtemelen takip etmek istediğiniz o konvansiyonudur. Bence bu neredeimage_tag onu arayacak, ama henüz test etmedim.

Ayrıca, RailsConf açılış konuşması sırasında, D2h'nin public folderartık çok fazla olmaması gerektiğini, çoğunlukla sadece hata sayfaları ve bir favicon olduğunu söylediğini hatırlıyorum .


Evet bu tahsis ile oynadım ve daha kolay hale getirmek için gidecekleri bir yol var. Evet, bunları öğeler klasörüne koymak işe yarıyor, ancak daha sonra varlıklar etiketini kullanabilirsiniz. Bu yüzden daha fazla bilgi ortaya çıkmasını bekliyorum.
Lee

1
Teşekkürler, bana da çok yardımcı oldu. Bu, diğer web geliştirme çerçevelerinden gelen Rails'i öğrenmeye çalışan bir ahbap olarak beni deli eden şeyler.
jn29098

6
ve iki farklı klasör aynı dosya adını içeriyorsa ne olur?
Hady Elsahar

6
DH2 olmamalı mı?
Tiago Franco

1
Neden zaten işe yaramış bir şeyi değiştirmek zorunda olduklarından emin değilim.
Tastybrownies

98

Sen adresinin css dosyasının uzantısı değiştirmek isteyeceksiniz .css.scssiçin .css.scss.erbve yapılacak:

background-image:url(<%=asset_path "admin/logo.png"%>);

Değişiklikleri görmek için "sert yenileme" yapmanız gerekebilir. OSX tarayıcılarında CMD + ÜST KRKT + R.

Üretimde,

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

dağıtım üzerine olur.


44
Sass'ta yeni görüntü yardımcıları var: image_url, image_path, ... Daha fazlasını burada bulabilirsiniz: edgeguides.rubyonrails.org/asset_pipeline.html erb'yi artık önişlemci olarak kullanmaya gerek yok
Martin Wawrusch 13:11

1
Sass-rails yardımcıları (image_url ve image-url) bir css.scss dosyasına denedim ama yorumlanmış gibi görünmüyor. Bir ipucu ?
invaino

2
Oluşturulan scss dosyaları varsayılan olarak .css.scss olarak adlandırılır, henüz yatağın sarılması gerçekleşmemiştir
Adrian Macneil

2
Nedense image-url benim için çalışmadı, ancak asset-url ('myimage.png', image) mükemmel çalıştı. (Raylar 3.1)
Elad

1
.css.css.erbapp/assets
3.0'dan yükselen

22

Ne için değer, ben bunu yaptığımda hiçbir klasör css dosyasında yolunu içermesi gerektiğini buldum. Örneğin, varsa app/assets/images/example.pngve bunu css dosyama koyarsam ...

div.example { background: url('example.png'); }

... bir şekilde sihirli bir şekilde çalışıyor. Bunu rake assets:precompile, tüm yükleme yollarınızdan her şeyi emen ve önemsiz bir çekmece klasörüne döken görevi çalıştırarak çözdüm:public/assets . Bu ironik, IMO ...

Her durumda, herhangi bir klasör yolu koymanız gerekmez, varlık klasörlerinizdeki her şey büyük bir dizinde yaşar. Bu sistemin dosya adı çakışmalarını nasıl çözdüğü belirsizdir, bu konuda dikkatli olmanız gerekebilir.

Biraz sinir bozucu bir değişiklik için orada daha iyi dokümanlar yok.


3
Adlandırma çakışmaları olduğunda, config.assets.paths dizisinde görünen ilk yol seçilen dosyadır. Bu asset_path()yardımcıyı kullanarak ve dizini belirterek önlenebilir .
Joseph Ravenwolfe

6
Bu "sihirli bir şekilde çalışır" çünkü css dosyası ve görüntüler aynı konumdadır. CSS dosya başvuruları css dosyasının konumuna göredir.
Bill Leeper

Varlık boru hattı, özellikle ön uç geliştiriciler için biraz kara kutu olabilir, ancak dosya yolları ve otomatik önbellek bozma konusunda endişelenmemek gibi birçok harika özellik sunar.
Miles

16

Ray 4'te artık bir css ve sass yardımcı resim URL'si kullanabilirsiniz:

div.logo {background-image: image-url("logo.png");}

Arka plan resimleriniz görünmüyorsa, stil sayfalarınızda nasıl referansta bulunduğunuzu düşünün.


1
Bu doğrudur (raylar 4 için). Bu cevaba oy verin!
ahnbizcad

Rails dizeyi olduğu kadar url anahtar sözcüğünü de girerek 'size yardımcı olur'. Bu, sizin gibi şeyler yapabileceğiniz anlamına gelir. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer

10

CSS veya IMG etiketindeki resimlere referans verirken image-name.jpg dosyasını kullanın

görüntü gerçekten ./assets/images/image-name.jpg altında bulunurken


Ben CSS söz konusu olduğunda bu yanlış olduğunu düşünüyorum - rails 3.1.0.rc4 kullanarak kullandığımda background: url('sort_asc_disabled.png')app / asset / images / sort_asc_disabled.png dosyası için çalışır.
wonderfulthunk

2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Bu railscast (Varlık boru hattındaki Raylar Eğitimi videosu), varlıkların boru hattındaki yolları da açıklamaya yardımcı olur. Oldukça kullanışlı buldum ve aslında birkaç kez izledim.

Seçtiğim çözüm @Lee McAlilly'nin yukarıda, ancak bu raylı yayın neden işe yaradığını anlamama yardımcı oldu. Umarım yardımcı olur!


0

Raylardaki varlık boru hattı bu kesin şey için bir yöntem sunar.

Sadece css veya scss dosyanıza image_path ('image filename') eklersiniz ve raylar her şeyi halleder. Örneğin:

.logo{ background:url(image_path('admin/logo.png'));

(tıpkı bir .erb görünümünde olduğu gibi çalıştığını ve yolda "/ asset" veya "/ asset / images" kullanmadığınızı unutmayın)

Rails ayrıca başka yardımcı yöntemler de sunuyor ve burada başka bir cevap daha var: Rails 3.1 kullanırken Sass'ta referans görüntüleri nasıl kullanabilirim?


Bu sorunun birkaç yaşında olduğunu biliyorum, ancak bu arama yaparken Google'da bulduğum ilk sayfa oldu, bu yüzden başkalarının kolayca başvurabilmesi için bir cevap seçmek harika olurdu!
benrugg
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.