Rails 3.1 dan Aset Gambar

156

Saya telah meletakkan semua gambar saya untuk tema admin saya di folder aset dalam folder yang disebut admin. Lalu saya tautkan ke sana seperti biasa yaitu.

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

FYI. Hanya untuk pengujian saya belum menggunakan tag asset_path karena saya belum mengkompilasi aset saya.

Ok semuanya baik sejauh ini sampai saya memutuskan untuk memperbarui gambar. Saya mengganti beberapa warna tetapi saat memuat ulang gambar gaya baru tidak muncul. Jika saya melihat gambar secara langsung di browser masih menampilkan gambar yang lama. Selangkah lebih maju saya menghancurkan folder gambar admin. Tapi tidak ada yang rusak semua gambar masih ditampilkan. Dan ya saya telah membersihkan cache dan mencoba beberapa browser.

Apakah ada semacam caching gambar yang terjadi? Ini hanya pengembangan lokal menggunakan pow untuk melayani halaman.

Bahkan menghancurkan seluruh folder gambar, gambar masih disajikan.

Apakah saya melewatkan sesuatu?

ruby-on-rails ruby-on-rails-3 Lee
sumber
2
itu tidak terjadi dengan 3.1 menggunakan pipa aset. Anda akan menggunakan perintah rake aset: precompile yang akan memampatkan file-file itu dan memindahkannya ke file publik
Lee
2
Memindahkan mereka ke folder publik berhasil, semua agak aneh karena mereka bekerja dengan baik dilayani dari folder aset. Mungkin harus menunggu lebih banyak dokumen pada 3.1.
Lee
3
Saya mengerti frustrasi Anda. Rupanya kandidat yang keluar tidak didokumentasikan dengan baik.
tybro0103
1
Biarkan mereka dalam aset, hanya saja jangan menyertakan path folder sama sekali. Lihat jawaban saya di bawah ini.
Andrew

Jawaban:

226

Dalam 3.1 Anda hanya menyingkirkan bagian 'gambar' dari jalan. Jadi gambar yang hidup /assets/images/example.pngsebenarnya dapat diakses dalam permintaan dapatkan di url ini -/assets/example.png

Karena assets/imagesfolder dihasilkan bersama dengan aplikasi 3.1 baru, ini adalah konvensi yang mungkin ingin Anda ikuti. Saya pikir di situlah tempatnyaimage_tag akan mencarinya, tetapi saya belum mengujinya.

Juga, selama keynote RailsConf, saya ingat D2h mengatakan yang public folderseharusnya tidak memiliki banyak lagi, sebagian besar hanya halaman kesalahan dan favicon.

Lee McAlilly
sumber
Ya saya telah bermain dengan membagikan ini dan mereka memiliki beberapa cara untuk membuatnya lebih mudah. Ya, menempatkannya di folder aset saya berfungsi tetapi Anda dapat menggunakan tag aset. Jadi saya menunggu untuk melihat info apa lagi yang keluar.
Lee
1
Terima kasih, banyak membantu saya juga. Ini adalah hal-hal yang membuatku gila ketika seorang pria mencoba mempelajari Rails yang berasal dari kerangka kerja pengembangan web lainnya.
jn29098
6
dan apa yang akan terjadi jika dua folder berbeda berisi nama file yang sama?
Hady Elsahar
6
Bukankah seharusnya itu DH2?
Tiago Franco
1
Tidak yakin mengapa mereka harus mengubah sesuatu yang sudah berfungsi.
Tastybrownies
98

Anda ingin mengubah ekstensi file css Anda dari .css.scssmenjadi .css.scss.erbdan lakukan:

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

Anda mungkin perlu melakukan "penyegaran keras" untuk melihat perubahan. CMD + SHIFT + R pada browser OSX.

Dalam produksi, pastikan

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

terjadi saat penyebaran.

tybro0103
sumber
44
Ada pembantu gambar baru di sass: image_url, image_path, ... Lainnya dapat ditemukan di sini: edgeguides.rubyonrails.org/asset_pipeline.html Tidak perlu lagi menggunakan erb sebagai preprosesor
Martin Wawrusch
1
Saya mencoba pembantu sass-rails (image_url dan image-url) ke dalam file css.scss tetapi sepertinya tidak diartikan. Ada petunjuk?
invaino
2
File scss yang dihasilkan dinamai .css.scss secara default, belum terjadi keributan pada tempat tidur
Adrian Macneil
2
Untuk beberapa alasan url gambar tidak berfungsi untuk saya, tetapi url aset ('myimage.png', gambar) berfungsi dengan baik. (Rails 3.1)
Elad
1
Jika ada orang yang meningkatkan dari 3.0 bertanya-tanya, Anda bisa mengganti nama stylesheet Anda dari .cssmenjadi .css.erb(setelah Anda memindahkannya ke app/assetsuntuk mendapatkan pemrosesan
erb
22

Untuk apa nilainya, ketika saya melakukan ini saya menemukan bahwa tidak ada folder yang harus dimasukkan dalam path di file css. Sebagai contoh jika saya punya app/assets/images/example.png, dan saya meletakkan ini di file css saya ...

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

... lalu entah bagaimana itu secara ajaib bekerja. Saya menemukan ini dengan menjalankan rake assets:precompiletugas, yang hanya menghisap semuanya dari semua jalur beban Anda dan membuangnya ke folder laci sampah:public/assets . Itu ironis, IMO ...

Bagaimanapun, ini berarti Anda tidak perlu meletakkan jalur folder apa pun, semua yang ada di folder aset Anda semua akan berakhir dengan tinggal di satu direktori besar. Bagaimana sistem ini menyelesaikan konflik nama file tidak jelas, Anda mungkin perlu berhati-hati tentang hal itu.

Agak frustasi tidak ada dokumen yang lebih baik di luar sana untuk perubahan sebesar ini.

Andrew
sumber
3
Ketika ada konflik penamaan, jalur pertama yang muncul di array config.assets.paths adalah file yang dipilih. Ini dapat dihindari dengan menggunakan asset_path()helper dan menentukan direktori.
Joseph Ravenwolfe
6
Ini "ajaib bekerja" karena file css dan gambar berada di lokasi yang sama. Referensi file CSS relatif terhadap lokasi file css.
Bill Leeper
Pipeline aset bisa berupa kotak hitam, terutama untuk pengembang front-end, tetapi ia menawarkan banyak fitur hebat seperti tidak perlu khawatir tentang jalur file dan penghentian cache otomatis.
Miles
16

Di rails 4 Anda sekarang dapat menggunakan css dan sass helper image-url: 

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

Jika gambar latar belakang Anda tidak muncul, pertimbangkan untuk melihat bagaimana Anda mereferensikannya di lembar gaya Anda.

bunga-bunga
sumber
1
Ini benar (untuk rel 4). Pilih jawaban ini!
ahnbizcad
Rails 'membantu Anda keluar' dengan memasukkan kata kunci url serta string. Ini berarti Anda dapat melakukan hal-hal seperti. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer
10

saat mereferensikan gambar dalam CSS atau dalam tag IMG, gunakan image-name.jpg

sementara gambar benar-benar terletak di bawah ./assets/images/image-name.jpg

Tilo
sumber
Saya pikir ini salah ketika datang ke CSS - menggunakan rel 3.1.0.rc4 ketika saya menggunakannya background: url('sort_asc_disabled.png')berfungsi untuk aplikasi file / aset / gambar / sort_asc_disabled.png.
wonderfulthunk
2

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

Railscast ini (video Tutorial Rails pada pipeline aset) banyak membantu menjelaskan jalur dalam pipet aset. Saya menemukan itu sangat berguna, dan benar-benar menontonnya beberapa kali.

Solusi yang saya pilih adalah @Lee McAlilly di atas, tetapi railscast ini membantu saya untuk memahami mengapa ia bekerja. Semoga ini bisa membantu!

botbot
sumber
0

Pipa aset dalam rel menawarkan metode untuk hal yang tepat ini.

Anda cukup menambahkan image_path ('nama file gambar') ke file css atau scss Anda dan rel menangani semuanya. Sebagai contoh:

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

(perhatikan bahwa ini berfungsi seperti pada tampilan .erb, dan Anda tidak menggunakan "/ aset" atau "/ aset / gambar" di jalur)

Rails juga menawarkan metode pembantu lainnya, dan ada jawaban lain di sini: Bagaimana cara menggunakan gambar referensi di Sass saat menggunakan Rails 3.1?

benrugg
sumber
Saya tahu pertanyaan ini berumur beberapa tahun, tetapi ini adalah halaman pertama yang saya temukan di google ketika mencari ini, jadi akan sangat bagus untuk memilih jawaban sehingga orang lain dapat dengan mudah merujuk ini!
benrugg