Как я могу ссылаться на ресурс изображений из CSS в grails?

Я хочу сослаться на изображение в моей основной таблице стилей для приложения Grails, и я не могу заставить его работать. Мое изображение живет в стандартном месте в моем приложении Grails...

projectweb-appimagesoutbound-blue.png

В моей таблице стилей я хочу использовать его в качестве фонового изображения для класса...

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

Это почему-то не работает. Моя таблица стилей также находится в обычном месте, т. е. 

projectweb-appcssmain.css

Я получаю недостающий маркер изображения, когда загружаю страницу в браузере. Я проверил, что у меня нет опечаток в именах и т. д. Я я также пробовал возиться с виртуальным путем в url-адресе, но я не могу понять, что мне нужно поместить туда, чтобы сделать эту работу в Grails.

Я не хочу использовать GSP и вставлять тег IMG в свой код, потому что я хочу управлять изображением через стили.

Итак, что же я делаю не так?
5 12
css resources grails

5 ответов:

Попробуйте добавить "../ "в начале Ури. Например: 

../images/outbound-blue.png

The "../ "в начале URI говорит браузеру подняться на один уровень до родительского каталога, а затем посмотреть в каталоге images. В настоящее время он настроен для поиска подкаталога с именем images в каталоге, содержащем таблицы стилей.

12

Более переносимый способ указать расположение изображений-это использовать функцию resource (): 

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

Однако будьте бдительны. Использование $resource{... не работает в пределах ссылки .файл CSS. Вам нужно добавить элемент style.

4

Обычно вы ссылаетесь на ресурс в таблице стилей как на относительный url. Url-адрес вашего изображения должен быть относительно расположения CSS-файла. Таким образом, ../images/outbound-blue.png из /appName/css/main.css будет ссылаться на /appName/images/outbound-blue.png

Если у вас все еще есть проблемы, вы можете отладить это с помощью такого инструмента, как firebug, чтобы проверить страницу и проверить каждый шаг в вашем стиле.
Проверьте это:

  • элемент, который, как вы думаете, стилизуется, подхватывает стили.
  • изображение, на которое вы ссылаетесь, может получить доступ можно как вручную, так и через firebug.
    • Загружаемый css-файл не кэшируется и фактически обновляется браузером.
1

Таким образом, проблема, казалось, заключалась в том, что браузер смотрел в

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

Что кажется правильным, но если вы проверите другие изображения на странице, они будут отображаться по пути

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

Так что, просто исключив изображения в вашем пути-имя должно исправить проблему. Однако это всего лишь работа, вокруг которой, я уверен, было бы лучшее объяснение и решение. Овации.

0