it-swarm.com.de

Rails 4 Image-Pfad, Image-URL und Asset-URL funktionieren in SCSS-Dateien nicht mehr

Sollen wir in Rails 4 etwas anderes als image-url und andere verwenden? Sie geben unterschiedliche Werte zurück, die scheinbar keinen Sinn ergeben. Wenn ich logo.png in /app/assets/images/logo.png habe und Folgendes tue, Das bekomme ich:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Natürlich funktioniert nichts davon, da sie mindestens /assets benötigen.

UPDATE : Eigentlich ist mir gerade aufgefallen, wie ich in = auf Bilder zugreife Rails 4? Ich habe ein Bild bei /app/assets/images/logo.png. Wenn ich jedoch zu einer der folgenden URLs gehe, wird mein Bild immer noch nicht angezeigt:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

PDATE 2: Die einzige Möglichkeit, meinen logo.png aufzurufen, besteht darin, ihn in das Verzeichnis /app/assets/stylesheets zu verschieben und dann aufzurufen:

http://localhost:3000/assets/logo.png
95
at.

Ich hatte gerade dieses Problem. 3 Punkte, die hoffentlich helfen werden:

  • Wenn Sie Bilder in Ihrem app/assets/images - Verzeichnis ablegen, sollten Sie das Bild direkt ohne Präfix im Pfad aufrufen können. dh image_url('logo.png')
  • Je nachdem, wo Sie das Asset verwenden, hängt es von der Methode ab. Wenn Sie es als background-image: - Eigenschaft verwenden, sollte Ihre Codezeile background-image: image-url('logo.png') sein. Dies funktioniert sowohl für less- als auch für sass-Stylesheets. Wenn Sie es in der Ansicht inline verwenden, müssen Sie den eingebauten image_tag - Helfer in Rails) verwenden, um Ihr Bild auszugeben. Auch hier ist kein Präfix <%= image_tag 'logo.png' %>
  • Wenn Sie Ihre Assets vorkompilieren, führen Sie schließlich rake assets:precompile Aus, um Ihre Assets zu generieren, oder rake assets:precompile Rails_ENV=production Für die Produktion. Andernfalls verfügt Ihre Produktionsumgebung beim Laden der Seite nicht über die Fingerabdruck-Assets.

Auch für diese Befehle in Punkt 3 müssen Sie bundle exec Voranstellen, wenn Sie Bundler ausführen.

107
cdaloisio

Ihre erste Formulierung, image_url('logo.png'), ist korrekt. Wenn das Bild gefunden wird, wird der Pfad /assets/logo.png Generiert (plus ein Hash in der Produktion). Wenn Rails das von Ihnen angegebene Bild jedoch nicht finden kann, wird es auf /images/logo.png Zurückgesetzt.

Die nächste Frage lautet: Warum findet Rails Ihr Image nicht? Wenn Sie es in app/assets/images/logo.png ablegen, sollten Sie über http://localhost:3000/assets/logo.png Darauf zugreifen können.

Wenn dies funktioniert, Ihr CSS jedoch nicht aktualisiert wird, müssen Sie möglicherweise den Cache leeren. Löschen Sie tmp/cache/assets Aus Ihrem Projektverzeichnis und starten Sie den Server (Webrick usw.) neu.

Wenn dies fehlschlägt, können Sie auch versuchen, einfach background-image: url(logo.png); zu verwenden. Dadurch sucht Ihr CSS nach Dateien mit demselben relativen Pfad (in diesem Fall/assets).

61
Nick Urban

Ich habe gerade herausgefunden, dass mit asset_url Helfer Sie das Problem zu lösen.

asset_url("backgrounds/pattern.png", image)
8
Leftis

Ich hatte ein ähnliches Problem beim Versuch, ein Hintergrundbild mit Inline-CSS hinzuzufügen. Aufgrund der Funktionsweise der Asset-Synchronisierung muss der Bilderordner nicht angegeben werden.

Das hat bei mir funktioniert:

background-image: url('/assets/image.jpg');
7
ykwx

Rails 4.0.0 sieht wie ein mit image-url Definiertes Image in derselben Verzeichnisstruktur wie Ihre CSS-Datei aus.

Wenn Ihre CSS in assets/stylesheets/main.css.scss Beispielsweise image-url('logo.png') zu url(/assets/logo.png) wird.

Wenn Sie Ihre CSS-Datei nach assets/stylesheets/cpanel/main.css.scss Verschieben, wird image-url('logo.png') zu /assets/cpanel/logo.png.

Wenn Sie das Bild direkt unter dem Verzeichnis assets/images verwenden möchten, können Sie asset-url('logo.png') verwenden.

4
kuntoaji

für Stylesheets: url (asset_path ('image.jpg'))

3
user2586863