Heroku'da Rails 4 ile garip bir sorun var. Görüntüler derlendiğinde karma eklenir, ancak CSS içinden bu dosyalara yapılan referansın adı doğru ayarlanmamıştır. Demek istediğim bu. Logo.png adlı bir dosyam var. Yine de heroku'da göründüğünde şöyle görünür:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Ancak CSS hala şunu belirtiyor:

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

Sonuç: görüntü görüntülenmiyor. Bunun içine giren var mı? Bu nasıl çözülebilir?

Dişliler Sass ile birlikte işi yapmak için kullanabileceğiniz bazı şık yardımcılara sahiptir . Sprockets bu yardımcıları yalnızca stil sayfası dosya uzantılarınız ya .css.scssda ise işlem yapar .css.sass.

Görüntüye özgü yardımcı:

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

Agnostik yardımcı:

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

Veya görüntü verilerini css dosyasına gömmek isterseniz:

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

Neden bilmiyorum, ama benim için çalıştı tek şey kullanıyordum etmeyin asset_path yerine ait IMAGE_PATH benim görüntüleri altında olmasına rağmen, varlık / images / dizinine:

Misal:

app/assets/images/mypic.png

Ruby'de:

asset_path('mypic.png')

.Scss içinde:

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

GÜNCELLEME:

Anladım ki bu varlık yardımcıları (projeme kurduğum) sass-rails geminden geliyor .

Raylar 4 olarak, bulunan bir görüntüyü başvurabilir assets/images/sizin de .SCSSböyle kolayca dosyalar:

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

Uygulamayı geliştirme modunda ( localhost:3000) başlattığınızda, şöyle bir şey görmelisiniz:

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

Üretim modunda, varlıklarınız önbellek yardımcı numaralarına sahip olacaktır:

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

Karma, varlık boru hattı ve sunucunun Önbelleğe almayı optimize et http://guides.rubyonrails.org/asset_pipeline.html

Bunun gibi bir şey deneyin:

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

İyi şanslar

Css cinsinden

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

orijinal yol /assets/images/banner.jpg olmasına rağmen, kural olarak url yöntemine just / asset / eklemeniz gerekir

Cevapların hiçbiri yol hakkında, .css.erbuzantıya sahip olduğumda , resimlere nasıl başvurulacağını söylemiyor . Benim için hem çalışmış üretim ve geliştirme yanı:

2.3.1 CSS ve ERB

Varlık boru hattı ERB'yi otomatik olarak değerlendirir . Bu, bir CSS öğesine bir erb uzantısı eklerseniz (örneğin, application.css.erb), asset_pathCSS kurallarınızda olduğu gibi yardımcıların kullanılabileceği anlamına gelir :

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

Bu, başvurulan belirli bir varlığın yolunu yazar. Bu örnekte, app/assets/images/image.pngburada atıfta bulunulacak gibi varlık yükleme yollarından birinde bir resme sahip olmak anlamlı olacaktır. Bu görüntü public/assetsparmak izli bir dosya olarak zaten mevcutsa , o yola başvurulur.

Görüntü verilerini doğrudan CSS dosyasına gömme yöntemi olan bir veri URI'si kullanmak istiyorsanız asset_data_uriyardımcıyı kullanabilirsiniz .

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

Bu, CSS kaynağına doğru biçimlendirilmiş bir veri URI'si ekler.

Kapanış etiketinin -%> stilinde olamayacağını unutmayın.

Sadece bu pasaj benim için çalışmıyor:

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

Ama yeniden adlandırma stylename.scss için stylename.css.scss bana yardımcı oluyor.

Rails belgelerine atıfta bulunarak, css'den görüntülere bağlantı kurmanın birkaç yolu olduğunu görüyoruz. Bölüm 2.3.2'ye gidin.

Öncelikle, bir sass dosyasıysa, css dosyanızın .scss uzantısına sahip olduğundan emin olun.

Sonra, gerçekten çirkin olan yakut yöntemini kullanabilirsiniz:

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

Veya daha güzel olan belirli formu kullanabilirsiniz:

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

Son olarak, genel formu kullanabilirsiniz:

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

BU İLE MUCKING SAAT SONRASI NELER BULDUĞUMUZ:

İŞLER :

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

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

Yukarıdaki gibi bir şey çıktı: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Dikkat lider "/" ve bu tırnak içinde bulunuyor . Ayrıca , stylesheet.css.scss dosyasındaki scss uzantısına ve image_path yardımcısına dikkat edin . Resim app / asset / images dizinindedir .

Çalışmıyor:

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

çalışmıyor, geçersiz özellik:

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

Benim son çare bu benim kamu s3 kova koymak ve oradan yük olacaktı, ama nihayet gidiyor bir şey var.

İlginç bir şekilde, 'arka plan resmi' kullanırsam işe yaramaz:

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

Ama sadece 'arka plan', şunları yapar:

background: url('picture.png');

Bazı durumlarda aşağıdakiler de uygulanabilir

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

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

Gem 'sass-rails' kullanırken, Rails 5, bootstrap 4'te aşağıdakiler benim için çalıştı,

.scss dosyasında:

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

görünüm dosyasında (örn. .html.slim):

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

Bu sizi her seferinde oraya götürmelidir.

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

Varsayılan olarak Rails 4 varlıklarınızı sunmaz. Bu işlevi etkinleştirmek için config / application.rb dosyasına gitmeniz ve şu satırı eklemeniz gerekir:

config.serve_static_assets = true

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

Rails 4'te şunu kullanın:

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

Css .erb uzantınıza ekleyebilirsiniz. Ej: style.css.erb

Sonra koyabilirsiniz:

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

Bu benim için çalıştı:

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