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.