Bagaimana cara mereferensikan gambar dalam CSS di dalam Rails 4


205

Ada masalah aneh dengan Rails 4 di Heroku. Ketika gambar dikompilasi, mereka memiliki hash yang ditambahkan ke dalamnya, namun referensi ke file-file dari dalam CSS tidak memiliki nama yang tepat disesuaikan. Inilah yang saya maksud. Saya memiliki file bernama logo.png. Namun ketika muncul di heroku itu dipandang sebagai:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Namun CSS masih menyatakan:

background-image:url("./logo.png");

Hasilnya: gambar tidak ditampilkan. Adakah yang mengalami hal ini? Bagaimana ini bisa diselesaikan?


1
Hanya FYI, Heroku telah mengkonfirmasi bahwa ini adalah bug ... mereka sedang mengerjakan solusi
Nick ONeill

Bisakah Anda memberi pembaruan tentang ini? Saya mengalami masalah yang sama
Minh Danh

Jawaban:


392

Sprockets bersama dengan Sass memiliki beberapa helper bagus yang dapat Anda gunakan untuk menyelesaikan pekerjaan. Sprockets hanya akan memproses bantuan ini jika ekstensi file stylesheet Anda salah satu .css.scssatau.css.sass .


Pembantu khusus gambar:

background-image: image-url("logo.png")

Pembantu agnostik:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Atau jika Anda ingin menyematkan data gambar dalam file css:

background-image: asset-data-url("logo.png")

21
asset-data-urlberfungsi untuk saya setelah saya mengubah file .css menjadi file .css.scss dalam aplikasi Rails 4. Terima kasih!
fatman13

@ fatman13 Ya, ini hanya berfungsi dengan file .scss dan .sass sejauh yang saya tahu.
zeeraw

Jeff: Yang lain tidak berfungsi menyediakan opsi url aset Anda diatur dengan benar. Itu tidak berlaku untuk asset-data-urlkarena menanamkan seluruh file di dalam stylesheet.
zeeraw

1
Mirip dengan @ fatman13 sejak saya menggunakan, sass-railssaya akhirnya menambahkan ekstensi file .scsske file .css yang menyinggung sehingga semuanya berakhir .css.scss, lalu mengganti semua instance url('blah.png')dengan url(asset-path('blah.png'))(dalam kasus saya semua blah.pngs dalam /vendored map).
likethesky

asset-url($asset)harus digunakan untuk sprockets 3, versi dengan $asset-typemungkin bekerja dengan beberapa versi yang lebih lama
prusswan

59

Tidak tahu mengapa, tetapi satu-satunya hal yang berhasil bagi saya adalah menggunakan asset_path alih - alih image_path , meskipun gambar saya berada di bawah aset / gambar / direktori :

Contoh:

app/assets/images/mypic.png

Di Ruby:

asset_path('mypic.png')

Dalam .scss:

url(asset-path('mypic.png'))

MEMPERBARUI:

Mengira itu ternyata pembantu aset ini berasal dari permata sass-rails (yang telah saya pasang di proyek saya).


2
bekerja untuk saya, solusi cara rel benar-benar sangat baik. Terima kasih @Yarin
MING

1
Iya! Setelah beberapa jam membenturkan kepalaku ke dinding, solusi "jalur aset" Anda akhirnya bekerja untuk saya di file .css.scss saya! background-image: url(asset-path('off.png'))
Raymond Gan

36

Di Rails 4, Anda dapat referensi gambar yang terletak di assets/images/dalam .SCSSfile Anda dengan mudah seperti ini:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

Saat Anda meluncurkan aplikasi dalam mode pengembangan ( localhost:3000), Anda akan melihat sesuatu seperti:

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

Dalam mode produksi, aset Anda akan memiliki nomor pembantu cache:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

1
@MikeLyons: Baru saja mengujinya pada proyek Rails 4.1 yang baru dan digunakan untuk Heroku dan itu bekerja dengan baik untuk saya. Anda pasti telah menyentuh sesuatu production.rb.
sergserg


11

Dalam css

background: url("/assets/banner.jpg");

walaupun path aslinya adalah /assets/images/banner.jpg, dengan konvensi Anda harus menambahkan just / assets / dalam metode url


1
Menggunakan CSS biasa, saya pikir saya menjadi gila - terima kasih!
Craig McGuff

2
ini tidak akan dikompilasi dalam produksi
dimitry_n

Wow, terima kasih, itu tidak terlalu intuitif. Jadi saya kira semua aset di jalur aset ( vendor/assets, app/assets, lib/assets, dll) dikombinasikan menjadi aset tunggal folder setelah prepossessing selesai?
ohhh

Ini tidak akan berfungsi di Produksi karena di Produksi, aset Anda dikompilasi dengan mendapatkan hash MD5 yang ditempel di akhir nama dan, dengan pengaturan umum, /assets/banner.jpgtidak akan berfungsi. Sebaliknya itu akan menjadi sesuatu seperti /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg. TL; DR Jangan gunakan ini.
Joshua Pinter

10

Tidak ada jawaban yang mengatakan tentang cara, ketika saya akan memiliki .css.erbekstensi, cara referensi gambar . Bagi saya bekerja di bidang produksi dan pengembangan juga:

2.3.1 CSS dan ERB

Pipa aset secara otomatis mengevaluasi ERB . Ini berarti jika Anda menambahkan ekstensi erb ke aset CSS (misalnya, application.css.erb), maka pembantu seperti asset_pathtersedia di aturan CSS Anda:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Ini menulis jalan menuju aset tertentu yang dirujuk. Dalam contoh ini, masuk akal untuk memiliki gambar di salah satu jalur pemuatan aset, seperti app/assets/images/image.png, yang akan dirujuk di sini. Jika gambar ini sudah tersedia public/assetssebagai file sidik jari, maka jalur itu dirujuk.

Jika Anda ingin menggunakan URI data - metode penyisipan data gambar langsung ke file CSS - Anda dapat menggunakan asset_data_urihelper.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Ini memasukkan URI data yang diformat dengan benar ke dalam sumber CSS.

Perhatikan bahwa tag penutup tidak boleh dengan gaya -%>.


5

Hanya cuplikan ini yang tidak berfungsi untuk saya:

background-image: url(image_path('transparent_2x2.png'));

Tetapi mengubah nama stylename.scss menjadi stylename.css.scss membantu saya.


4

Referensi dokumen Rails kita melihat bahwa ada beberapa cara untuk link gambar dari css. Pergi ke bagian 2.3.2.

Pertama, pastikan file css Anda memiliki ekstensi .scss jika itu file sass.

Selanjutnya, Anda dapat menggunakan metode ruby, yang benar-benar jelek:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Atau Anda dapat menggunakan formulir khusus yang lebih bagus:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Terakhir, Anda dapat menggunakan formulir umum:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

3

APA YANG SAYA TELAH DITEMUKAN SETELAH JAM MUCKING DENGAN INI:

KARYA:

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

Output di atas seperti: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Perhatikan "/" yang utama , dan itu dalam tanda kutip . Perhatikan juga ekstensi scss dan image_path helper di yourstylesheet.css.scss. Gambar ada di direktori app / assets / images .

Tidak bekerja:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

tidak berfungsi, properti tidak valid:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

Pilihan terakhir saya adalah memasukkannya ke ember s3 publik saya dan memuatnya dari sana, tetapi akhirnya berhasil.


Bagi siapa pun yang datang ke sini dan masih mengalami masalah: Pastikan file css Anda diperbarui dan Anda belum mengkompilasi aset Anda secara lokal dan lupa memperbarui mereka.
Hartwig

Hartwig - apa artinya itu? Apakah maksud Anda Anda harus menjalankan precompile lagi sebelum metode ini bekerja? Saya sudah mencoba semua yang disarankan pada posting ini (semuanya) dan tidak ada yang berhasil untuk saya
Mel

2

Menariknya, jika saya menggunakan 'gambar latar', itu tidak berfungsi:

background-image: url('picture.png');

Tapi hanya 'latar belakang', itu tidak:

background: url('picture.png');

tetapi itu hanya bekerja dari file scss, bukan ketika ditempatkan dalam penugasan properti gaya dalam div ... saya bingung
AnderSon


1

Saat menggunakan gem 'sass-rails', di Rails 5, bootstrap 4, berikut ini bekerja untuk saya,

dalam file .scss:

    background-image: url(asset_path("black_left_arrow.svg"));

dalam file tampilan (misalnya .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

0

Ini akan membuat Anda sampai di sana setiap saat.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);


0

Di Rails 4, cukup gunakan

.hero { background-image: url("picture.jpg"); }

dalam file style.css Anda selama gambar latar belakang terselip di app / aset / gambar.


Baca pertanyaan lengkap
Adriano Resende

0

Anda dapat menambahkan ekstensi css .erb Anda. Ej: style.css.erb

Maka Anda dapat menempatkan:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

0

Ini bekerja untuk saya:

background: #4C2516 url('imagename.png') repeat-y 0 0;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.