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?

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

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

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

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

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

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.

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.

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"

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.

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

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

Aber nur "Hintergrund":

background: url('picture.png');

In einigen Fällen kann auch Folgendes zutreffen

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

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

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

Dies sollte Sie jedes Mal dorthin bringen.

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

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

In Rails 4 einfach verwenden

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

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;

Das hat bei mir funktioniert:

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