Es gibt ein seltsames Problem mit Rails 4 auf Heroku. Wenn Bilder kompiliert werden, werden ihnen Hashes hinzugefügt, aber der Verweis auf diese Dateien in CSS hat nicht den richtigen Namen. Hier ist was ich meine. Ich habe eine Datei namens logo.png. Wenn es jedoch auf Heroku auftaucht, wird es wie folgt angesehen:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
Das CSS besagt jedoch immer noch:
background-image:url("./logo.png");
Das Ergebnis: Das Bild wird nicht angezeigt. Ist jemand darauf gestoßen? Wie kann das gelöst werden?
ruby-on-rails
heroku
ruby-on-rails-4
Nick ONeill
quelle
quelle
Antworten:
Sprockets hat zusammen mit Sass einige raffinierte Helfer, mit denen Sie Ihre Arbeit erledigen können. Pinion wird nur verarbeitet diese Helfer , wenn Ihre Stylesheet - Datei - Erweiterungen sind entweder
.css.scss
oder.css.sass
.Bildspezifischer Helfer:
Agnostischer Helfer:
Oder wenn Sie die Bilddaten in die CSS-Datei einbetten möchten:
quelle
asset-data-url
funktioniert für mich, nachdem ich meine .css-Datei in einer Rails 4-App in .css.scss-Datei geändert habe. Vielen Dank!asset-data-url
da die gesamte Datei in das Stylesheet eingebettet wird.sass-rails
ich schließlich die Dateierweiterung.scss
zu den beleidigenden CSS-Dateien hinzugefügt, sodass sie alle enden.css.scss
, und dann alle Instanzen vonurl('blah.png')
durch ersetzturl(asset-path('blah.png'))
(in meinem Fall waren alle blah.pngs in einem/vendor
ed Ordner).asset-url($asset)
sollte für Kettenräder 3 verwendet werden,$asset-type
funktioniert die Version mit wahrscheinlich mit einer älteren VersionIch weiß nicht warum, aber das einzige, was für mich funktioniert hat, war die Verwendung von Asset_Pfad anstelle von Image_Pfad , obwohl sich meine Bilder im Verzeichnis Assets / Images / befinden :
Beispiel:
In Ruby:
In .scss:
AKTUALISIEREN:
Es stellte sich heraus, dass diese Asset-Helfer aus dem Edelstein von Sass-Rails stammen (den ich in meinem Projekt installiert hatte).
quelle
background-image: url(asset-path('off.png'))
In Rails 4 können Sie auf folgende Weise auf ein Bild
assets/images/
in Ihren.SCSS
Dateien verweisen :Wenn Sie die Anwendung im Entwicklungsmodus (
localhost:3000
) starten , sollten Sie Folgendes sehen:Im Produktionsmodus haben Ihre Assets die Cache-Hilfsnummern:
quelle
production.rb
.Der Hash ist, weil die Asset-Pipeline und der Server das Caching optimieren http://guides.rubyonrails.org/asset_pipeline.html
Versuchen Sie so etwas:
Viel Glück
quelle
.css
hat bei mir nicht funktioniert.In CSS
Obwohl der ursprüngliche Pfad /assets/images/banner.jpg lautet, müssen Sie gemäß der URL-Methode nur / Assets / hinzufügen
quelle
vendor/assets
,app/assets
,lib/assets
, usw.) in einem einzigen Vermögen kombiniert bekommen Ordner nach einnehmend abgeschlossen ist ?/assets/banner.jpg
nicht funktionieren. Stattdessen wird es so etwas wie sein/assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg
. TL; DR Verwenden Sie dies nicht.Keine der Antworten sagt darüber aus
.css.erb
, wie man Bilder referenziert , wenn ich eine Erweiterung habe . Für mich war sowohl in der Produktion und Entwicklung als auch:2.3.1 CSS und ERB
Die Asset-Pipeline wertet ERB automatisch aus . Dies bedeutet, wenn Sie einem CSS- Asset (z. B.
application.css.erb
) eine erb-Erweiterung hinzufügen ,asset_path
stehen in Ihren CSS-Regeln folgende Hilfsprogramme zur Verfügung:Dadurch wird der Pfad zu dem bestimmten Asset geschrieben, auf das verwiesen wird. In diesem Beispiel wäre es sinnvoll, ein Bild in einem der Asset-Ladepfade zu haben
app/assets/images/image.png
, auf die hier verwiesen wird. Wenn dieses Bild bereitspublic/assets
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 CSS- Datei - können Sie den
asset_data_uri
Helfer verwenden.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.
quelle
Nur dieses Snippet funktioniert bei mir nicht:
Aber stylename.scss in stylename.css.scss umzubenennen hilft mir.
quelle
Wenn wir auf die Rails-Dokumente verweisen, sehen wir, dass es einige Möglichkeiten gibt, auf Bilder von CSS zu verlinken. Gehen Sie einfach zu Abschnitt 2.3.2.
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:
Oder Sie können das spezifischere Formular verwenden, das schöner ist:
Zuletzt können Sie das allgemeine Formular verwenden:
quelle
WAS ICH NACH STUNDEN MUCKING MIT DIESEM GEFUNDEN HABE:
WERKE:
Die obigen Ausgaben geben ungefähr Folgendes aus:
"/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 yourstylesheet.css.scss. Das Bild befindet sich im Verzeichnis app / assets / images .
Funktioniert nicht:
funktioniert nicht, ungültige Eigenschaft:
Mein letzter Ausweg war, diese in meinen öffentlichen s3-Eimer zu legen und von dort zu laden, aber endlich etwas in Gang zu bringen.
quelle
Interessanterweise funktioniert es nicht, wenn ich 'Hintergrundbild' verwende:
Aber nur "Hintergrund":
quelle
In einigen Fällen kann auch Folgendes zutreffen
logo {Hintergrund: URL (<% = asset_data_uri 'logo.png'%>)}
Quelle: http://guides.rubyonrails.org/asset_pipeline.html
quelle
Bei der Verwendung von Edelstein-Sass-Rails in Rails 5, Bootstrap 4, hat Folgendes für mich funktioniert:
in der .scss-Datei:
in Ansichtsdatei (zB .html.slim):
quelle
Dies sollte Sie jedes Mal dorthin bringen.
quelle
Standardmäßig wird Rails 4 Ihr Vermögen nicht bedienen. Um diese Funktionalität zu aktivieren, müssen Sie in config / application.rb die folgende Zeile hinzufügen:
https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets
quelle
In Rails 4 einfach verwenden
.hero { background-image: url("picture.jpg"); }
quelle
Sie können Ihrer CSS .erb-Erweiterung hinzufügen. Ej: style.css.erb
Dann können Sie setzen:
quelle
Das hat bei mir funktioniert:
quelle