Rails 4-Bildpfad, Bild-URL und Asset-URL funktionieren in SCSS-Dateien nicht mehr


99

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

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, weil sie zumindest /assetsvorne brauchen .

UPDATE : Eigentlich habe ich gerade bemerkt, wie ich auf Bilder in Rails 4 zugreifen kann. 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

UPDATE 2 : Die einzige Möglichkeit, meine aufzurufen,logo.pngbesteht darin, sie in das/app/assets/stylesheetsVerzeichnis zu verschieben und dann aufzurufen:

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

Versuchen Sie dies:asset_path("logo.png", image)
— Marcelo De Polli

@depa - das wurde einfach in "/logo.png" konvertiert, wodurch mein Bild nicht angezeigt wird.
— um.

3
Verwenden Sie diesen Helfer in einer .cssDatei oder in einer .css.scssDatei?
— Marcelo De Polli

@depa - keinen Helfer benutzen. Ich denke, dies ist ein größeres Problem, wenn Assets für meinen Bilderordner nicht funktionieren
— bei.

1
@depa - oh ich verstehe was du fragst. Es ist in einer .css.scssDatei
— bei.

Antworten:


113

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

  • Wenn Sie Bilder in Ihrem platzieren 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 sein background-image: image-url('logo.png'). Dies funktioniert sowohl für weniger als auch für Sass-Stylesheets. Wenn Sie es in der Ansicht inline verwenden, müssen Sie das integrierte verwendenimage_tag Helfer in Schienen verwenden, um Ihr Bild auszugeben. Wieder kein Präfix<%= image_tag 'logo.png' %>
  • Wenn Sie Ihre Assets vorkompilieren, ausführen rake assets:precompile, um Ihre Assets zu generieren, oder rake assets:precompile RAILS_ENV=productionfür die Produktion, andernfalls verfügt Ihre Produktionsumgebung beim Laden der Seite nicht über die Assets mit Fingerabdrücken.

Auch für diese Befehle in Punkt 3 müssen Sie ihnen ein Präfix voranstellen, bundle execwenn Sie Bundler ausführen.


1
Ein weiterer Punkt ist das Lesen der Dokumentation guide.rubyonrails.org/asset_pipeline.html . Können Sie auch im Web Developer Debug Ihres Browsers sehen, ob die Bilder geladen werden?
— H. Rabiee

3
So schreiben Sie eine Antwort. Jedes Szenario. Vorhersage der "Was wäre wenn", keine losen Enden. Ein Zeichen von jemandem, der "Kampf gesehen" hat (das Problem wirklich durchgearbeitet hat).
— Ahnbizcad

Ich wurde mehrmals von der fehlenden RAILS_ENV = Produktion gebissen.
— Sixty4Bit

62

Ihre erste Formulierung image_url('logo.png')ist richtig. Wenn das Bild gefunden wird, wird der Pfad generiert /assets/logo.png(plus ein Hash in der Produktion). Wenn Rails das von Ihnen benannte Bild jedoch nicht finden kann, wird darauf zurückgegriffen /images/logo.png.

Die nächste Frage lautet: Warum findet Rails Ihr Bild nicht? Wenn Sie es in app / assets / images / logo.png ablegen, sollten Sie in der Lage sein, darauf zuzugreifen, indem Sie auf gehen http://localhost:3000/assets/logo.png.

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

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


2
Nur um darauf zu springen, wurde ich gebissen, indem ich doppelte Anführungszeichen auf dem Bildpfad anstelle von einfachen Anführungszeichen verwendete. Sie verwenden häufig einfache Anführungszeichen mit den Asset-Helfern in den CSS / SCSS-Dateien.
— d_ethier

Ich erhalte "undefinierte lokale Variable oder Methode" Bild "
— Muhammad Umer

Ist es möglich, dass Sie versehentlich ein Leerzeichen vor das Wort Bild setzen?
— Nick Urban

10

Ich habe gerade herausgefunden, dass asset_urlSie dieses Problem mit dem Helfer lösen.

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

Ich habe einen undefined local variable or method 'image'Fehler bekommen.
— Pinguin

Vielleicht hat sich auf Schienen etwas geändert, diese Antwort ist alt! Sie können versuchenasset_path("<your_path>", type: :image)
— Leftis

8

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

Danke, ich habe es getan assets/img.jpgoder ../assets/img.jpgwas offensichtlich in keinem Verzeichnis funktioniert. /assets/img.jpgtut. TY
— ElliotM

5

Rails 4.0.0 sieht mit Bild definiert aus image-url in derselben Verzeichnisstruktur wie Ihre CSS-Datei definiert ist.

Zum Beispiel, wenn Ihre CSS in assets/stylesheets/main.css.scss, image-url('logo.png')wirdurl(/assets/logo.png) .

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

Wenn Sie das Bild direkt im Verzeichnis Assets / Images verwenden möchten, können Sie es verwenden asset-url('logo.png')


5

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


3
Was ist der größte Unterschied zwischen url(asset_path('image.jpg'), url('image.jpg')und image-url('image.jpg')? Ich arbeite mit Rails 5.0.0.1 und url()funktioniert einwandfrei in SCSS- Dateien und in html.erb- Dateien, die ich verwende. Daherasset_path() möchte ich den richtigen Weg kennen. Danke im Voraus.
— Alexventuraio

asset_pathFügen Sie der Bilddatei einen Digest-Anhang hinzu. Es ist eigentlich für die Produktion gedacht. Nach jeder Bereitstellung wird der Digest-Anhang geändert und der Browser des Benutzers lädt eine neue Version der Bilder herunter.
— Alex Kojin
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.