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?

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

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

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

Hash adalah karena pipeline aset dan server Optimalkan caching http://guides.rubyonrails.org/asset_pipeline.html

Coba sesuatu seperti ini:

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

Semoga berhasil

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

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 -%>.

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.

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"

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.

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

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

Tapi hanya 'latar belakang', itu tidak:

background: url('picture.png');

Dalam beberapa kasus berikut ini juga bisa menjadi applier

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

Sumber: http://guides.rubyonrails.org/asset_pipeline.html

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

Ini akan membuat Anda sampai di sana setiap saat.

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

Secara default Rails 4 tidak akan melayani aset Anda. Untuk mengaktifkan fungsi ini, Anda perlu masuk ke config / application.rb dan tambahkan baris ini:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

Di Rails 4, cukup gunakan

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

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

Maka Anda dapat menempatkan:

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

Ini bekerja untuk saya:

background: #4C2516 url('imagename.png') repeat-y 0 0;