Comment faire référence à une ressource d'image de CSS dans Grails?

Je veux faire référence à une image dans ma feuille de style principale pour une application Grails et je ne peux pas le faire fonctionner. Mon image vit dans l'emplacement standard dans mon Grails app ...Comment faire référence à une ressource d'image de CSS dans Grails?

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

Dans ma feuille de style que je veux l'utiliser comme une image d'arrière-plan pour une classe ...

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

Cela ne travailler pour une raison quelconque. Ma feuille de style est également dans l'emplacement normal, c'est-à-dire

project\web-app\css\main.css

Je reçois un repère d'image manquant lorsque je charge la page dans le navigateur. J'ai vérifié que je n'ai pas de fautes de frappe dans les noms, etc. J'ai aussi essayé de bidouiller avec le chemin virtuel dans l'url, mais je ne peux pas comprendre ce que j'ai besoin de mettre là pour faire ce travail dans Grails.

Je ne veux pas utiliser GSP et insérer une balise IMG dans mon code car je veux contrôler l'image à travers les styles.

Alors, qu'est-ce que je fais de mal?

Source

2010-02-03 Simon

Je n'ai eu aucun problème en utilisant la solution Jared décrite ci-dessous. Après l'avoir modifié, êtes-vous sûr que le navigateur n'a pas mis en cache le style précédent et ne l'a pas mis à jour? Que se passe-t-il lorsque vous utilisez Firebug pour inspecter l'élément sur lequel vous souhaitez appliquer l'arrière-plan? –

En outre, j'ai remarqué que vous avez fait référence à «sortant bleu» dans votre exemple initial et «entrant bleu» dans votre exemple mis à jour après avoir essayé la suggestion de Jared. Un faux type là? Juste essayer de trouver de petites choses qui ont pu causer votre arrière-plan manquant. :) –

avait le même problème. la raison pour laquelle cela ne fonctionne pas est que vous avez oublié les citations dans l'URL. Ecrire une image de fond: url ('images/outbound-blue.png'); – tObi

Essayez d'ajouter "../" au début de l'URI. Par exemple:

../images/outbound-blue.png

Le « ../ » au début de l'URI indique au navigateur de monter d'un niveau dans le répertoire parent puis regardez dans le répertoire images. Actuellement, vous l'avez configuré pour rechercher un sous-répertoire appelé images dans le répertoire contenant les feuilles de style.

Source

2010-02-03 17:36:33 Jared

J'ai essayé ceci et cela n'a pas fonctionné ... voir edit – Simon

Le problème est presque certainement avec quelque chose d'autre que le chemin. Ma suggestion a été prise à partir de la feuille de style par défaut créée avec les applications Grails. Peut-être que vous devriez retag ou re demander à la question d'être une question CSS plus générale? – Jared

Tu avais raison Jared. Quelque chose était en train de mettre la page en cache. CTRL-F5 dans le navigateur ne l'a pas corrigé, j'ai dû faire rebondir le serveur de grails pour que la nouvelle feuille de style apparaisse. Je suppose que je l'avais corrigé avant même que j'ai posté la question. Je ne suis pas sûr de ce que les règles sont à propos de quand recommencer les grails. Les changements de contrôleur semblent en avoir besoin. – Simon

Généralement, vous référenceriez une ressource dans une feuille de style sous la forme d'une URL relative. L'URL de votre image doit être relative à l'emplacement du fichier CSS. Alors ../images/outbound-blue.png de /appName/css/main.css seront référentes /appName/images/outbound-blue.png

Si vous rencontrez toujours des problèmes, vous pouvez déboguer cela en utilisant un outil comme Firebug pour inspecter la page et vérifiez chaque étape de votre style.
Vérifiez que:

L'élément que vous pensez être en style est ramasser les styles.
L'image à laquelle vous faites référence est accessible manuellement et via Firebug.
Le fichier css que vous chargez n'est pas mis en cache et est actualisé par le navigateur.

Source

2010-02-03 19:18:11

Une façon plus portable pour spécifier des emplacements d'image est d'utiliser la fonction ressource():

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

Source

2011-07-25 22:35:07

Exactement ce que je cherchais, merci. – Gepsens

C'est de loin le moyen le plus utile. Il vous permet également d'accéder aux plugins, ce qui peut être le plus souvent nécessaire. – cdeszaq

Cela devrait être la bonne réponse .... – Glstunna

Sachez cependant. L'utilisation de $resource{... ne fonctionne pas dans un fichier .css référencé. Vous devez ajouter un élément style.

Source

2013-03-21 14:08:35 stenix

Il existe un moyen de passer un fichier CSS" autonome "par le moteur de template de Grails avec un impact étonnamment faible sur l'application, vérifiez cet article: http://www.wthr.us/2010/02/16/preprocessing-css-in-grails/ - était la solution parfaite pour moi :) – netmikey

Le problème semble être que le navigateur était à la recherche dans

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

qui semble correct, mais si vous inspectez d'autres images sur la page, ils rendent du chemin

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

Donc, juste en excluant les images dans votre chemin-nom devrait résoudre le problème. Cependant, il ne s'agit que d'un travail qui, j'en suis sûr, aurait une meilleure explication et une meilleure solution. À votre santé.

Source

2016-04-16 13:50:43

Comment faire référence à une ressource d'image de CSS dans Grails?

Répondre

Questions connexes