Wie man Bilder in CSS in Rails referenziert 4

Es gibt ein seltsames Problem mit Rails 4 auf Heroku. Wenn Bilder kompiliert werden, werden ihnen Hashes hinzugefügt, aber der Verweis auf diese Dateien in CSS wird nicht mit dem richtigen Namen angepasst. Hier ist was ich meine. Ich habe eine Datei namens logo.png. Doch wenn es auf Heroku erscheint, wird es wie folgt angesehen:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png 

Das CSS sagt jedoch immer noch:

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

Das Ergebnis: Das Bild wird nicht angezeigt. Ist da jemand reingerannt? Wie kann das getriggers werden?

Kettenräder zusammen mit Sass haben einige nette Helfer, mit denen Sie die Arbeit erledigen können. Ritzel verarbeiten diese Helfer nur, wenn Ihre Dateierweiterungen für Stylesheets entweder .css.scss oder .css.sass .


Bildspezifischer Helfer:

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

Agnostischer Helfer:

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

Oder wenn Sie die Bilddaten in die CSS-Datei einbetten möchten:

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

Ich weiß nicht warum, aber nur das, was für mich funktionierte, war Asset_Pfad anstelle von Image_Pfad , obwohl meine Bilder sich im Verzeichnis Assets / images / befinden :

Beispiel:

 app/assets/images/mypic.png 

In Ruby:

 asset_path('mypic.png') 

In .scss:

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

AKTUALISIEREN:

Es stellte sich heraus, dass diese Asset-Helfer aus dem Edelstein ” Sass-Rails” stammen (den ich in meinem Projekt installiert hatte).

In Rails 4 können Sie einfach auf ein Bild in assets/images/ in Ihren .SCSS Dateien .SCSS :

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

Wenn Sie die Anwendung im Entwicklungsmodus ( localhost:3000 ) starten, sollten Sie Folgendes sehen:

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

Im Produktionsmodus haben Ihre Assets die Cache-Helper-Nummern:

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

Der Hash ist, weil die Asset-Pipeline und der Server Caching optimieren http://guides.rubyonrails.org/asset_pipeline.html

Versuchen Sie etwas wie folgt:

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

Viel Glück

In CSS

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

Obwohl der ursprüngliche Pfad /assets/images/banner.jpg lautet, muss per Konvention einfach / assets / in der URL-Methode hinzugefügt werden

Keine der Antworten sagt über den Weg, wann ich .css.erb Erweiterung habe, wie man Bilder referenziert. Für mich arbeitete sowohl in der Produktion als auch in der Entwicklung :

2.3.1 CSS und ERB

Die Asset-Pipeline wertet ERB automatisch aus. Das heißt, wenn Sie einem CSS- Asset eine Erweiterung von erb hinzufügen (zum Beispiel application.css.erb ), dann sind in Ihren CSS-Regeln Helfer wie asset_path verfügbar:

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

Dies schreibt den Pfad zu dem bestimmten Objekt, auf das verwiesen wird. In diesem Beispiel wäre es sinnvoll, ein Bild in einem der app/assets/images/image.png zu haben, z. B. app/assets/images/image.png , auf das hier verwiesen wird. Wenn dieses Bild bereits in public/assets als Fingerabdruckdatei verfügbar ist, wird auf diesen Pfad verwiesen.

Wenn Sie einen Daten-URI verwenden möchten – eine Methode, um die Bilddaten direkt in die CSS- Datei einzubetten – können Sie den Helfer asset_data_uri .

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

Dies fügt einen korrekt formatierten Daten-URI in die CSS-Quelle ein.

Beachten Sie, dass das schließende Tag nicht vom Stil “%” sein kann.

Nur dieser Ausschnitt funktioniert nicht für mich:

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

Aber styleName.scss in stylename.css.scss umbenennen hilft mir.

WAS ICH NACH STUNDEN DES MUCKENS MIT DIESEM GEFUNDEN HABE:

ARBEITEN:

 background-image: url(image_path('transparent_2x2.png')); // how to add attributes like repeat, center, fixed? 

Das obige "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png" etwas wie: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Beachten Sie das führende “/” und es steht in Anführungszeichen . Beachten Sie auch die Hilfsprogramme scss extension und image_path in Ihrer Datei thystylesheet.css.scss. Das Bild befindet sich im Verzeichnis app / assets / images .

functioniert nicht:

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

funktioniert nicht, ungültige Eigenschaft:

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

Mein letzter Ausweg war, sie von dort aus in meinen öffentlichen s3-Eimer zu laden, aber endlich etwas in Gang zu bringen.

Wenn wir auf die Rails-Dokumente verweisen, sehen wir, dass es einige Möglichkeiten gibt, mit Bildern von css zu verlinken. Gehen Sie einfach zu Abschnitt 2.3.2.

Stellen Sie zuerst sicher, dass Ihre CSS-Datei die Erweiterung .scss hat, wenn es sich um eine Sass-Datei handelt.

Als nächstes können Sie die Ruby-Methode verwenden, die wirklich hässlich ist:

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

Oder Sie können das spezifische Formular verwenden, das schöner ist:

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

Zuletzt können Sie das allgemeine Formular verwenden:

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

Interessanterweise funktioniert es nicht, wenn ich ‘background-image’ verwende:

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

Aber nur “Hintergrund”, es tut:

 background: url('picture.png'); 

In einigen Fällen kann das Folgende auch angewendet werden

logo {Hintergrund: URL (< % = Asset_data_uri 'logo.png'%>)}

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

Dies sollte dich jedes Mal dorthin bringen.

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

Standardmäßig wird Rails 4 Ihre Assets nicht bereitstellen. Um diese functionalität zu aktivieren, müssen Sie in config / application.rb gehen und folgende Zeile hinzufügen:

 config.serve_static_assets = true 

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

In Rails 4 einfach verwenden

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

in Ihrer style.css Datei, solange das Hintergrundbild in app / assets / images versteckt ist.

Sie können zu Ihrer CSS-Erweiterung .erb hinzufügen. Ej: style.css.erb

Dann können Sie setzen:

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

Das hat für mich funktioniert:

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