Wie beziehe ich eine Bildquelle von CSS in Grails?

Ich möchte auf ein Bild in meinem Haupt-Stylesheet für eine Grails App verweisen und ich kann es nicht zum Funktionieren bringen. Mein Bild lebt im Standardverzeichnis in meinem Grails App ...Wie beziehe ich eine Bildquelle von CSS in Grails?

project\web-app\images\outbound-blue.png

In meinem Sheet Ich möchte für eine Klasse es als Hintergrundbild verwenden ...

.messageimg { 
    height:17px; 
    width:16px; 
    background-image:url(images/outbound-blue.png); 
    background-repeat:no-repeat; 
}

Dies gilt nicht aus irgendeinem Grund arbeiten. Mein Stylesheet ist auch an der normalen Position, d. H.

project\web-app\css\main.css

Ich bekomme eine fehlende Bildmarke, wenn ich die Seite im Browser lade. Ich habe überprüft, dass ich keine Tippfehler in Namen usw. habe. Ich habe auch versucht, mit dem virtuellen Pfad in der URL herumzuspielen, aber ich kann nicht herausfinden, was ich da reinsetzen muss, damit dies in Grails funktioniert.

Ich möchte nicht GSP verwenden und ein IMG-Tag in meinen Code einfügen, weil ich das Bild über Stile steuern möchte.

Also, was mache ich falsch?

Quelle

2010-02-03 Simon

Ich hatte keine Probleme mit der unten beschriebenen Lösung Jared. Sind Sie nach dem Ändern sicher, dass der Browser den vorherigen Stil nicht im Cache gespeichert und nicht aktualisiert hat? Was passiert, wenn Sie etwas wie Firebug verwenden, um das Element zu untersuchen, von dem Sie erwarten, dass der Hintergrund angewendet wird? –

Außerdem habe ich festgestellt, dass Sie in Ihrem ersten Beispiel auf "Outbound-Blue" und in Ihrem Beispiel auf "Inbound-Blue" verwiesen, nachdem Sie Jareds Vorschlag getestet haben. Ein Tipp gibts da? Versuche nur kleine Dinge zu finden, die deinen fehlenden Hintergrund verursacht haben könnten. :) –

hatte das gleiche Problem. Der Grund, warum dies nicht funktioniert, ist, weil Sie die Anführungszeichen in URL vergessen haben. Schreibe Hintergrundbild: url ('images/outbound-blue.png'); – tObi

Versuchen Sie, "../" am Anfang des URI hinzuzufügen. Zum Beispiel:

../images/outbound-blue.png

Den „../“ am Anfang des URI teilt den Browser mit einer Ebene auf das übergeordnete Verzeichnis gehen dann in dem Verzeichnis images suchen. Derzeit haben Sie es eingerichtet, nach einem Unterverzeichnis namens images in dem Verzeichnis zu suchen, das Stylesheets enthält.

Quelle

2010-02-03 17:36:33 Jared

Ich habe dies versucht und es hat nicht funktioniert ... siehe bearbeiten – Simon

Das Problem ist fast sicher mit etwas anderem als den Weg. Mein Vorschlag wurde streight aus dem Standard-Stylesheet übernommen, das mit Grails-Apps erstellt wurde. Vielleicht sollten Sie die Frage neu schreiben oder eine allgemeinere CSS-Frage stellen? – Jared

Sie hatten Recht Jared. Etwas hat die Seite zwischengespeichert. STRG-F5 im Browser hat es nicht korrigiert, ich musste den Grails-Server bouncen, damit das neue Stylesheet angezeigt wird. Ich vermute, ich hatte es behoben, bevor ich sogar die Frage gestellt. Ich bin nicht sicher, was die Regeln sind, wenn Grails neu gestartet werden sollen. Controller-Änderungen scheinen es zu brauchen. – Simon

Normalerweise verweisen Sie auf eine Ressource in einem Stylesheet als relative URL. Die URL Ihres Bildes sollte relativ zum Speicherort der CSS-Datei sein. So ../images/outbound-blue.png von /appName/css/main.css wird Referenzierung /appName/images/outbound-blue.png

Wenn Sie noch Fragen haben, können Sie diese debuggen, indem Sie ein Tool wie Firebug mit der Seite zu prüfen und jeden Schritt in Ihrem Stil zu überprüfen.
Stellen Sie sicher, dass:

Das Element, das Sie denken, ist gestylt zu werden ist die Stile aufnimmt.
Auf das Bild, auf das Sie verweisen, kann sowohl manuell als auch über Firebug zugegriffen werden.
Die CSS-Datei, die Sie laden, wird nicht zwischengespeichert und tatsächlich vom Browser aktualisiert.

Quelle

2010-02-03 19:18:11

Ein möglicher Weg, Bildstellen angeben, ist die Ressource() Funktion zu verwenden: obwohl

.messageimg { 
    height:17px; 
    width:16px; 
    background-image:url('${resource(dir: "images", file: "outbound-blue.png")}'); 
    background-repeat:no-repeat; 
}

Quelle

2011-07-25 22:35:07

Genau das, was ich gesucht habe, danke. – Gepsens

Dies ist bei weitem der nützlichste Weg. Damit können Sie auch auf Plugins zugreifen, die häufiger benötigt werden. – cdeszaq

Dies sollte die richtige Antwort sein .... – Glstunna

Seien Sie sich bewusst. Die Verwendung von $resource{... funktioniert nicht in einer referenzierten .css-Datei. Sie müssen ein style Element hinzufügen.

Quelle

2013-03-21 14:08:35 stenix

Es gibt eine Möglichkeit, eine" Stand-alone "CSS-Datei durch Grailles Template-Engine mit überraschend wenig Auswirkungen auf die Anwendung zu übergeben, zu überprüfen Dieser Artikel: http://www.wthr.us/2010/02/16/preprocessing-css-in-grails/ - war die perfekte Lösung für mich :) – netmikey

So schien das Problem zu sein, dass der Browser in gesucht

http://localhost:8080/<app-name>/assets/images/<background-image-name>

was richtig scheint, aber wenn Sie andere Bilder auf der Seite prüfen, machen sie aus dem Weg

http://localhost:8080/<app-name>/assets/background-image-name

Wenn Sie also nur Bilder in Ihrem Pfadnamen ausschließen, sollte das Problem behoben sein. Dies ist jedoch nur eine Arbeit, von der ich sicher bin, dass sie eine bessere Erklärung und eine bessere Lösung hätte. Prost.

Quelle

2016-04-16 13:50:43

Wie beziehe ich eine Bildquelle von CSS in Grails?

Antwort

Verwandte Themen