Rails 3.1 und Image Assets

156

Ich habe alle meine Bilder für mein Admin-Thema im Assets-Ordner in einem Ordner namens admin abgelegt. Dann verlinke ich es wie gewohnt dh.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

Zu Ihrer Information. Nur zum Testen verwende ich das Tag "asset_path" noch nicht, da ich meine Assets noch nicht kompiliert habe.

Ok, alles gut, bis ich mich entschied, ein Bild zu aktualisieren. Ich habe einige Farben ersetzt, aber beim erneuten Laden wird das neu gestaltete Bild nicht angezeigt. Wenn ich das Bild direkt im Browser ansehe, wird immer noch das alte Bild angezeigt. Ich ging noch einen Schritt weiter und zerstörte den Ordner mit den Administratorbildern. Aber es hat nichts kaputt gemacht, alle Bilder werden noch angezeigt. Und ja, ich habe meinen Cache geleert und mehrere Browser ausprobiert.

Gibt es eine Art Bild-Caching? Dies ist nur eine lokale Entwicklung mit pow, um die Seiten zu bedienen.

Selbst wenn der gesamte Bilderordner zerstört wird, werden die Bilder weiterhin bereitgestellt.

Vermisse ich etwas

ruby-on-rails ruby-on-rails-3 Lee
quelle
2
Dies ist bei 3.1 mit der Asset-Pipeline nicht der Fall. Sie würden den Befehl Rake Assets: Precompile verwenden, der diese Dateien komprimiert und in die öffentliche Datei verschiebt
Lee
2
Das Verschieben in den öffentlichen Ordner hat funktioniert, alles ein bisschen seltsam, da sie gut aus dem Assets-Ordner bereitgestellt wurden. Möglicherweise müssen Sie auf weitere Dokumente zu 3.1 warten.
Lee
3
Ich verstehe deine Frustration. Anscheinend werden Release-Kandidaten nicht sehr gut dokumentiert.
Tybro0103
1
Lassen Sie sie in den Assets, fügen Sie einfach überhaupt keinen Ordnerpfad hinzu. Siehe meine Antwort unten.
Andrew

Antworten:

226

In 3.1 werden Sie nur den Teil "Bilder" des Pfades entfernen. Ein Bild, in dem lebt, /assets/images/example.pngist also tatsächlich in einer Get-Anfrage unter dieser URL verfügbar -/assets/example.png

Da der assets/imagesOrdner zusammen mit einer neuen 3.1-App generiert wird, ist dies die Konvention, der Sie wahrscheinlich folgen sollen. Ich denke, dort image_tagwird danach gesucht, aber das habe ich noch nicht getestet.

Während der RailsConf-Keynote erinnere ich mich, dass D2h sagte, das public foldersollte nicht mehr viel enthalten, meistens nur Fehlerseiten und ein Favicon.

Lee McAlilly
quelle
Ja, ich habe mit dieser Zuteilung gespielt und sie haben noch einen weiten Weg vor sich, um es einfacher zu machen. Ja, das Einfügen in meinen Assets-Ordner funktioniert, aber dann können Sie das Assets-Tag verwenden. Also bin ich gespannt, welche weiteren Informationen herauskommen.
Lee
1
Danke, hat mir auch sehr geholfen. Dies ist die Art von Dingen, die mich als Typen verrückt machen, der versucht, Rails zu lernen, die aus anderen Webentwicklungs-Frameworks stammen.
jn29098
6
und was würde passieren, wenn zwei verschiedene Ordner denselben Dateinamen enthalten würden?
Hady Elsahar
6
Sollte es nicht DH2 sein?
Tiago Franco
1
Ich bin mir nicht sicher, warum sie etwas ändern mussten, das bereits funktionierte.
Tastybrownies
98

Sie wollen die Erweiterung Ihrer CSS - Datei zu ändern , um vom .css.scsszu .css.scss.erbund tun:

background-image:url(<%=asset_path "admin/logo.png"%>);

Möglicherweise müssen Sie eine "harte Aktualisierung" durchführen, um Änderungen zu sehen. CMD + UMSCHALT + R in OSX-Browsern.

Stellen Sie in der Produktion sicher

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

geschieht bei der Bereitstellung.

tybro0103
quelle
44
Es gibt neue Bildhelfer in sass: image_url, image_path, ... Weitere finden Sie hier: edgeguides.rubyonrails.org/asset_pipeline.html Sie müssen erb nicht mehr als Präprozessor verwenden
Martin Wawrusch
1
Ich habe die Sass-Rails-Helfer (image_url und image-url) in einer css.scss-Datei ausprobiert, aber sie scheint nicht interpretiert zu werden. Irgendeine Ahnung ?
Invaino
2
Die generierten scss-Dateien heißen standardmäßig .css.scss, es wurde noch nicht ins Bett geschissen
Adrian Macneil
2
Aus irgendeinem Grund funktionierte die Bild-URL bei mir nicht, aber die Asset-URL ('myimage.png', Bild) funktionierte perfekt. (Rails 3.1)
Elad
1
Im Fall von 3,0 jemand Upgrade fragt, können Sie einfach Ihre Stylesheets von umbenennen .csszu .css.erb(nachdem Sie sie verschoben haben in app/assetsden erb Verarbeitung ohne sass zu bekommen.
William Denniss
22

Als ich das tat, stellte ich fest, dass kein Ordner im Pfad der CSS-Datei enthalten sein sollte. Zum Beispiel, wenn ich habe app/assets/images/example.png, und ich füge dies in meine CSS-Datei ...

div.example { background: url('example.png'); }

... dann funktioniert es irgendwie magisch. Ich habe dies herausgefunden, indem ich die rake assets:precompileAufgabe ausgeführt habe, bei der einfach alles aus all Ihren Ladepfaden herausgesaugt und in einem Ordner mit Junk-Schubladen abgelegt wird : public/assets. Das ist ironisch, IMO ...

In jedem Fall bedeutet dies, dass Sie keine Ordnerpfade einfügen müssen. Alles in Ihren Asset-Ordnern befindet sich in einem riesigen Verzeichnis. Wie dieses System Dateinamenkonflikte löst, ist unklar. Möglicherweise müssen Sie dabei vorsichtig sein.

Ein bisschen frustrierend, dass es für diese große Veränderung keine besseren Dokumente gibt.

Andrew
quelle
3
Bei Namenskonflikten ist der erste Pfad, der im Array config.assets.paths angezeigt wird, die ausgewählte Datei. Dies kann vermieden werden, indem der asset_path()Helfer verwendet und das Verzeichnis angegeben wird.
Joseph Ravenwolfe
6
Dies "funktioniert auf magische Weise", da sich die CSS-Datei und die Bilder am selben Speicherort befinden. CSS-Dateiverweise beziehen sich auf den Speicherort der CSS-Datei.
Bill Leeper
Die Asset-Pipeline kann eine Art Black Box sein, insbesondere für Front-End-Entwickler, bietet jedoch viele großartige Funktionen, z. B. keine Sorge um Dateipfade und automatische Cache-Busting.
Meilen
16

In Rails 4 können Sie jetzt eine CSS- und Sass-Helfer-Bild-URL verwenden: 

div.logo {background-image: image-url("logo.png");}

Wenn Ihre Hintergrundbilder nicht angezeigt werden, sollten Sie sich ansehen, wie Sie sie in Ihren Stylesheets referenzieren.

lflores
quelle
1
Dies ist korrekt (für Schienen 4). Stimmen Sie diese Antwort ab!
Ahnbizcad
Rails "hilft Ihnen", indem Sie das URL-Schlüsselwort sowie die Zeichenfolge eingeben. Dies bedeutet, dass Sie Dinge wie tun können. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer
10

Verwenden Sie beim Verweisen auf Bilder in CSS oder in einem IMG-Tag image-name.jpg

während sich das Bild wirklich unter ./assets/images/image-name.jpg befindet

Tilo
quelle
Ich denke, das ist falsch, wenn es um CSS geht - die Verwendung von Rails 3.1.0.rc4 background: url('sort_asc_disabled.png')funktioniert für die Datei app / assets / images / sort_asc_disabled.png.
wundervoller
2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Dieser Railscast (Rails Tutorial-Video zur Asset-Pipeline) hilft auch dabei, die Pfade in der Asset-Pipeline zu erklären. Ich fand es ziemlich nützlich und habe es tatsächlich ein paar Mal gesehen.

Die Lösung, die ich gewählt habe, ist @Lee McAlillys oben, aber dieser Railscast hat mir geholfen zu verstehen, warum es funktioniert. Ich hoffe es hilft!

Botbot
quelle
0

Die Asset-Pipeline in Schienen bietet genau dafür eine Methode.

Sie fügen einfach image_path ('image filename') zu Ihrer CSS- oder SCSS-Datei hinzu und Rails kümmert sich um alles. Beispielsweise:

.logo{ background:url(image_path('admin/logo.png'));

(Beachten Sie, dass es genau wie in einer .erb-Ansicht funktioniert und Sie im Pfad nicht "/ Assets" oder "/ Assets / Images" verwenden.)

Rails bietet auch andere Hilfsmethoden an, und hier gibt es eine andere Antwort: Wie verwende ich Referenzbilder in Sass, wenn ich Rails 3.1 verwende?

benrugg
quelle
Ich weiß, dass diese Frage ein paar Jahre alt ist, aber dies war die erste Seite, die ich bei Google gefunden habe, als ich danach gesucht habe. Es wäre also großartig, eine Antwort auszuwählen, damit andere leicht darauf verweisen können!
Benrugg