it-swarm.com.de

Referenzieren von Bildern in CSS in Rails 4

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

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Das CSS sagt jedoch immer noch:

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

Das Ergebnis: Das Bild wird nicht angezeigt. Jemand stößt darauf? Wie kann das gelöst werden?

190
Nick ONeill

Kettenräder zusammen mit Sass hat einige nette Helfer , die Sie verwenden können, um die Arbeit zu erledigen. Sprockets verarbeiten diese Helfer nur, wenn Ihre Stylesheet-Dateierweiterungen entweder .css.scss oder .css.sass sind.


Image-spezifischer 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")
367
zeeraw

Ich weiß nicht warum, aber das einzige, was bei mir funktioniert hat, war die Verwendung von asset_path anstelle von von Bildpfad , 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'))

UPDATE:

Es stellte sich heraus, dass diese Asset-Helfer von den sass-Rails gem stammen (die ich in meinem Projekt installiert hatte) .

56
Yarin

In Rails 4 können Sie ein Bild, das sich in assets/images/ in Ihren .SCSS-Dateien befindet, einfach wie folgt referenzieren:

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

Wenn Sie die Anwendung im Entwicklungsmodus (localhost:3000) starten, sollte Folgendes angezeigt werden:

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

Im Produktionsmodus verfügen Ihre Assets über die Cache-Helper-Nummern:

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

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

Versuchen Sie etwas so:

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

Viel Glück

25
Mauro Dias

In css 

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

obwohl der ursprüngliche Pfad /assets/images/banner.jpg lautet, müssen Sie der Konvention zufolge nur/assets/in der URL-Methode hinzufügen

11
user2458192

Keine der Antworten sagt über die Art und Weise aus, wann ich die Erweiterung .css.erb habe, wie ich images referenzieren kann. Für mich arbeitete sowohl in production als auch development:

2.3.1 CSS und ERB

Die Asset-Pipeline wertet ERB automatisch aus. Das heißt, wenn Sie eine erb-Erweiterung zu einem CSS -Asset hinzufügen (z. B. application.css.erb), stehen in Ihren CSS-Regeln Helfer wie asset_path zur Verfügung:

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

Dadurch wird der Pfad zu dem betreffenden Asset geschrieben, auf das verwiesen wird. In diesem Beispiel wäre es sinnvoll, ein Bild in einem der Asset-Ladepfade zu haben, beispielsweise app/assets/images/image.png, auf das hier verwiesen wird. Wenn dieses Bild in public/assets bereits als 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 Datei CSS, können Sie den Helper asset_data_uri 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.

10
Arup Rakshit

Nur dieser Ausschnitt funktioniert nicht für mich:

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

Umbenennen von stylename.scss in stylename.css.scss hilft mir.

5
s.vatagin

Verweise auf die Rails-Dokumente Wir sehen, dass es einige Möglichkeiten gibt, Bilder von css zu verlinken. Fahren Sie einfach mit Abschnitt 2.3.2 fort.

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 spezielle Formular verwenden, das schöner ist:

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

Schließlich können Sie das allgemeine Formular verwenden: 

asset-url("Rails.png") returns url(/assets/Rails.png)
asset-path("Rails.png") returns "/assets/Rails.png"
3
Nick Res

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?

Das obige gibt etwas aus wie: "/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 Ihrer stylesheet.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 es, diese in meinen öffentlichen S3-Eimer zu legen und von dort aus zu laden, aber endlich ging etwas los.

3
Danny

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

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

Aber einfach nur "Hintergrund":

background: url('picture.png');
1
AnderSon

In einigen Fällen kann das Folgende auch zutreffen

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

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

1
Stephane Paquet

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

Dann können Sie setzen:

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

Dies sollte Sie jedes Mal dorthin bringen.

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

In Rails 4 einfach verwenden 

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

0
boussac

Bei der Verwendung von gem 'sass-Rails' in Rails 5, bootstrap 4 hat Folgendes für mich funktioniert:

in .scss Datei:

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

in Ansichtsdatei (z. B. .html.slim):

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

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

config.serve_static_assets = true

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

0
ksiomelo

Das hat für mich funktioniert:

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