Rails 4 image-path, image-url, dan asset-url tidak lagi berfungsi di file SCSS

99

Apakah kita harus menggunakan sesuatu selain image-urldan lainnya di Rails 4? Mereka mengembalikan nilai-nilai berbeda yang tampaknya tidak masuk akal. Jika saya sudah logo.pngmasuk /app/assets/images/logo.pngdan saya melakukan hal berikut, inilah yang saya dapatkan:

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

Tentu saja tidak ada yang berhasil karena mereka membutuhkan setidaknya /assetsdi depan.

UPDATE : Sebenarnya, saya baru tahu, bagaimana cara mengakses gambar di Rails 4? Saya memiliki gambar di/app/assets/images/logo.png. Tetapi jika saya membuka salah satu URL berikut, saya masih tidak melihat gambar saya:

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

PEMBARUAN 2 : Satu-satunya cara saya dapat menampilkannyalogo.pngadalah dengan memindahkannya ke/app/assets/stylesheetsdirektori lalu menariknya ke atas:

http://localhost:3000/assets/logo.png
ruby-on-rails asset-pipeline ruby-on-rails-4 di.
sumber
Coba ini:asset_path("logo.png", image)
Marcelo De Polli
@depa - yang hanya diubah menjadi "/logo.png", yang tidak menampilkan gambar saya.
di.
3
Apakah Anda menggunakan pembantu itu di dalam .cssfile atau dalam .css.scssfile?
Marcelo De Polli
@ depa - tidak menggunakan pembantu apapun. Saya pikir ini adalah masalah aset yang lebih besar hanya karena tidak berfungsi untuk folder gambar saya
di.
1
@ depa - oh saya mengerti apa yang Anda tanyakan. Ada di dalam .css.scssfile
di.

Jawaban:

113

Saya baru saja mengalami masalah ini sendiri. 3 poin yang semoga akan membantu:

  • Jika Anda menempatkan gambar di app/assets/imagesdirektori Anda , maka Anda harus dapat memanggil gambar secara langsung tanpa awalan di jalurnya. yaitu.image_url('logo.png')
  • Tergantung di mana Anda menggunakan aset akan bergantung pada metode. Jika Anda menggunakannya sebagai background-image:properti, maka baris kode Anda harusbackground-image: image-url('logo.png') . Ini berfungsi untuk stylesheet less dan sass. Jika Anda menggunakannya secara inline dalam tampilan, maka Anda perlu menggunakan image_taghelper in rails bawaan untuk menampilkan gambar Anda. Sekali lagi, tidak ada awalan<%= image_tag 'logo.png' %>
  • Terakhir, jika Anda melakukan prakompilasi aset Anda, jalankan rake assets:precompileuntuk menghasilkan aset Anda, ataurake assets:precompile RAILS_ENV=production untuk produksi, jika tidak, lingkungan produksi Anda tidak akan memiliki aset sidik jari saat memuat halaman.

Juga untuk perintah-perintah di poin 3, Anda perlu memberi awalan bundle execjika Anda menjalankan bundler.

cdaloisio.dll
sumber
1
Hal lain adalah untuk membaca dokumentasi guides.rubyonrails.org/asset_pipeline.html . Anda juga dapat melihat di Debug Pengembang Web di browser Anda jika gambar sedang dimuat?
H.Rabiee
3
Inilah cara Anda menulis jawaban. Setiap skenario. Memprediksi "bagaimana jika", tidak ada jalan keluar yang longgar. Tanda seseorang yang telah "melihat pertempuran" (benar-benar berhasil mengatasi masalahnya).
ahnbizcad
Saya telah digigit oleh kehilangan RAILS_ENV = produksi pada beberapa kesempatan.
Sixty4Bit
62

Rumus pertama Anda image_url('logo.png'),, benar. Jika gambar ditemukan, itu akan menghasilkan jalur /assets/logo.png(ditambah hash dalam produksi). Namun, jika Rails tidak dapat menemukan gambar yang Anda beri nama, gambar itu akan dikembalikan ke /images/logo.png.

Pertanyaan selanjutnya adalah: mengapa Rails tidak menemukan gambar Anda? Jika Anda meletakkannya di app / assets / images / logo.png, maka Anda harus dapat mengaksesnya dengan masuk kehttp://localhost:3000/assets/logo.png .

Jika berhasil, tetapi CSS Anda tidak diperbarui, Anda mungkin perlu menghapus cache. Menghapustmp/cache/assets dari direktori proyek Anda dan mulai ulang server (webrick, dll.).

Jika gagal, Anda juga dapat mencoba menggunakan. background-image: url(logo.png);Itu akan menyebabkan CSS Anda mencari file dengan jalur relatif yang sama (dalam hal ini adalah / assets).

Nick Urban
sumber
2
Hanya untuk melompat pada ini, saya digigit dengan menggunakan tanda kutip ganda pada jalur gambar, bukan tanda kutip tunggal. Anda banyak menggunakan tanda kutip tunggal dengan penolong aset di file css / scss.
d_ethier
saya mendapatkan "variabel lokal atau metode` gambar 'yang tidak terdefinisi
Muhammad Umer
Apakah mungkin Anda secara tidak sengaja meletakkan spasi sebelum kata gambar?
Nick Urban
10

Saya baru tahu, bahwa dengan menggunakan asset_urlhelper Anda menyelesaikan masalah itu.

asset_url("backgrounds/pattern.png", image)
Leftis
sumber
Saya mendapat undefined local variable or method 'image'kesalahan.
Penguin
Mungkin ada yang berubah di rel, jawaban ini sudah tua! Anda dapat mencobaasset_path("<your_path>", type: :image)
Leftis
8

Saya memiliki masalah serupa, mencoba menambahkan gambar latar belakang dengan css inline. Tidak perlu menentukan folder gambar karena cara kerja sinkronisasi aset.

Ini berhasil untuk saya:

background-image: url('/assets/image.jpg');
ykwx
sumber
Terima kasih, saya lakukan assets/img.jpgatau ../assets/img.jpgyang jelas tidak berfungsi di direktori mana pun. /assets/img.jpgtidak. TY
ElliotM
5

Rails 4.0.0 akan terlihat gambar yang ditentukan dengan image-url dalam struktur direktori yang sama dengan file css Anda.

Misalnya, jika css Anda masuk assets/stylesheets/main.css.scss, image-url('logo.png')menjadiurl(/assets/logo.png) .

Jika Anda memindahkan file css ke assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')menjadi/assets/cpanel/logo.png .

Jika Anda ingin menggunakan gambar langsung di bawah direktori aset / gambar, Anda dapat menggunakan asset-url('logo.png')

kuntoaji
sumber
5

untuk stylesheet: url (asset_path ('image.jpg'))

pengguna2586863
sumber
3
Apa perbedaan utama antara url(asset_path('image.jpg'), url('image.jpg')dan image-url('image.jpg')? Saya bekerja dengan Rails 5.0.0.1 dan url()bekerja dengan baik di file SCSS dan di file html.erb yang saya gunakan asset_path()jadi saya ingin tahu cara yang benar untuk melakukannya. Terima kasih sebelumnya.
alexventuraio
asset_pathtambahkan ke file gambar lampiran intisari. Ini sebenarnya untuk produksi, setelah setiap penerapan, lampiran ringkasan akan diubah dan browser pengguna akan mengunduh gambar versi baru.
Alex Kojin