So referenzieren Sie Bilder in CSS in Rails 4

205

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 hat nicht den richtigen Namen. Hier ist was ich meine. Ich habe eine Datei namens logo.png. Wenn es jedoch auf Heroku auftaucht, wird es wie folgt angesehen:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Das CSS besagt jedoch immer noch:

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

Das Ergebnis: Das Bild wird nicht angezeigt. Ist jemand darauf gestoßen? Wie kann das gelöst werden?

Nick ONeill
quelle
1
Nur zu
Ihrer Information
Können Sie diesbezüglich ein Update geben? Ich habe das gleiche Problem
Minh Danh

Antworten:

392

Sprockets hat zusammen mit Sass einige raffinierte Helfer, mit denen Sie Ihre Arbeit erledigen können. Pinion wird nur verarbeitet diese Helfer , wenn Ihre Stylesheet - Datei - Erweiterungen sind entweder .css.scssoder .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")
Zeeraw
quelle
21
asset-data-urlfunktioniert für mich, nachdem ich meine .css-Datei in einer Rails 4-App in .css.scss-Datei geändert habe. Vielen Dank!
Fatman13
@ fatman13 Ja, soweit ich weiß, funktioniert dies nur mit .scss- und .sass-Dateien.
Zeeraw
Jeff: Die anderen funktionieren, sofern Ihre Asset-URL-Optionen korrekt eingerichtet sind. Dies gilt nicht, asset-data-urlda die gesamte Datei in das Stylesheet eingebettet wird.
Zeeraw
1
Ähnlich wie bei @ fatman13, seit ich es verwendet habe, habe sass-railsich schließlich die Dateierweiterung .scsszu den beleidigenden CSS-Dateien hinzugefügt, sodass sie alle enden .css.scss, und dann alle Instanzen von url('blah.png')durch ersetzt url(asset-path('blah.png'))(in meinem Fall waren alle blah.pngs in einem /vendored Ordner).
likethesky
asset-url($asset)sollte für Kettenräder 3 verwendet werden, $asset-typefunktioniert die Version mit wahrscheinlich mit einer älteren Version
prusswan
59

Ich weiß nicht warum, aber das einzige, was für mich funktioniert hat, war die Verwendung von Asset_Pfad anstelle von Image_Pfad , obwohl sich meine Bilder 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 von Sass-Rails stammen (den ich in meinem Projekt installiert hatte).

Yarin
quelle
2
funktioniert bei mir, wirklich sehr gute schienenschienen lösung. Danke @Yarin
AMIC MING
1
Ja! Nachdem ich mehrere Stunden lang meinen Kopf gegen die Wand geschlagen hatte, funktionierte Ihre "Asset-Path" -Lösung endlich für mich in meiner .css.scss-Datei! background-image: url(asset-path('off.png'))
Raymond Gan
36

In Rails 4 können Sie auf folgende Weise auf ein Bild assets/images/in Ihren .SCSSDateien verweisen :

.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-Hilfsnummern:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
sergserg
quelle
1
@ MikeLyons: Habe es gerade in einem brandneuen Rails 4.1-Projekt getestet und in Heroku bereitgestellt und es funktioniert gut für mich. Sie müssen etwas berührt haben production.rb.
Serggserg
25

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

Versuchen Sie so etwas:

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

Viel Glück

Mauro Dias
quelle
Hat für mich gearbeitet! Danke :)
Daniel
Was sollte in Ihrem Fall die Dateierweiterung sein? Nur .csshat bei mir nicht funktioniert.
Arup Rakshit
Arbeite für mich! Dank bro!
AlejandroJSR7
11

In CSS

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

Obwohl der ursprüngliche Pfad /assets/images/banner.jpg lautet, müssen Sie gemäß der URL-Methode nur / Assets / hinzufügen

user2458192
quelle
1
Mit einfachem altem CSS dachte ich, ich würde verrückt - danke!
Craig McGuff
2
Dies wird nicht in der Produktion kompiliert
dimitry_n
Wow, danke, das ist nicht sehr intuitiv. Also habe ich alle Vermögenswerte in den Asset - Pfade erraten ( vendor/assets, app/assets, lib/assets, usw.) in einem einzigen Vermögen kombiniert bekommen Ordner nach einnehmend abgeschlossen ist ?
Ohhh
Dies funktioniert in der Produktion nicht, da Ihre Assets in der Produktion mit einem MD5-Hash kompiliert werden, der am Ende des Namens angebracht ist, und mit typischen Einstellungen /assets/banner.jpgnicht funktionieren. Stattdessen wird es so etwas wie sein /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg. TL; DR Verwenden Sie dies nicht.
Joshua Pinter
10

Keine der Antworten sagt darüber aus .css.erb, wie man Bilder referenziert , wenn ich eine Erweiterung habe . Für mich war sowohl in der Produktion und Entwicklung als auch:

2.3.1 CSS und ERB

Die Asset-Pipeline wertet ERB automatisch aus . Dies bedeutet, wenn Sie einem CSS- Asset (z. B. application.css.erb) eine erb-Erweiterung hinzufügen , asset_pathstehen in Ihren CSS-Regeln folgende Hilfsprogramme zur Verfügung:

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

Dadurch wird der Pfad zu dem bestimmten Asset geschrieben, auf das verwiesen wird. In diesem Beispiel wäre es sinnvoll, ein Bild in einem der Asset-Ladepfade zu haben app/assets/images/image.png, auf die hier verwiesen wird. Wenn dieses Bild bereits public/assetsals Fingerabdruckdatei verfügbar ist , wird auf diesen Pfad verwiesen.

Wenn Sie einen Daten-URI verwenden möchten - eine Methode zum direkten Einbetten der Bilddaten in die CSS- Datei - können Sie den asset_data_uriHelfer verwenden.

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

Dadurch wird ein korrekt formatierter Daten-URI in die CSS-Quelle eingefügt.

Beachten Sie, dass das schließende Tag nicht den Stil%> haben kann.

Arup Rakshit
quelle
5

Nur dieses Snippet funktioniert bei mir nicht:

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

Aber stylename.scss in stylename.css.scss umzubenennen hilft mir.

an vatagin
quelle
4

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

Stellen Sie zunächst 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 spezifischere 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"
Nick Res
quelle
3

WAS ICH NACH STUNDEN MUCKING MIT DIESEM GEFUNDEN HABE:

WERKE:

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

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

Die obigen Ausgaben geben ungefähr Folgendes aus: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Beachten Sie das führende "/" und es steht in Anführungszeichen . Beachten Sie auch die scss-Erweiterung und den image_path-Helfer in yourstylesheet.css.scss. Das Bild befindet sich im Verzeichnis app / assets / images .

Funktioniert 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, diese in meinen öffentlichen s3-Eimer zu legen und von dort zu laden, aber endlich etwas in Gang zu bringen.

Danny
quelle
Für alle, die hierher kommen und immer noch Probleme haben: Stellen Sie sicher, dass Ihre CSS-Datei aktualisiert wird und dass Sie Ihre Assets nicht lokal vorkompiliert und vergessen haben, sie zu aktualisieren.
Hartwig
Hartwig - was heißt das? Meinen Sie damit, dass Sie die Vorkompilierung erneut ausführen müssen, bevor diese Methode funktioniert? Ich habe alles versucht, was in diesem Beitrag vorgeschlagen wurde (alles) und nichts funktioniert für mich
Mel
2

Interessanterweise funktioniert es nicht, wenn ich 'Hintergrundbild' verwende:

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

Aber nur "Hintergrund":

background: url('picture.png');
AnderSon
quelle
aber das funktioniert nur aus der scss-Datei, nicht, wenn in einer Stileigenschaftszuweisung innerhalb eines div platziert ... ich bin verwirrt
AnderSon
1

Bei der Verwendung von Edelstein-Sass-Rails in Rails 5, Bootstrap 4, hat Folgendes für mich funktioniert:

in der .scss-Datei:

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

in Ansichtsdatei (zB .html.slim):

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

Dies sollte Sie jedes Mal dorthin bringen.

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

Standardmäßig wird Rails 4 Ihr Vermögen nicht bedienen. Um diese Funktionalität zu aktivieren, müssen Sie in config / application.rb die folgende Zeile hinzufügen:

config.serve_static_assets = true

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

ksiomelo
quelle
1
Dies funktioniert, aber würde dies nicht die Vorteile einer Vorkompilierung der Assets rückgängig machen?
Arcolye
0

In Rails 4 einfach verwenden

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

in Ihrer style.css-Datei, solange sich das Hintergrundbild in App / Assets / Images befindet.

Boussac
quelle
Lesen Sie die Frage vollständig
Adriano Resende
0

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

Dann können Sie setzen:

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

Das hat bei mir funktioniert:

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