Как мне обратиться к ресурсу изображения из CSS в Grails?

Question

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

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

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

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

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

project\web-app\css\main.css

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

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

Итак, что я делаю не так?

Answer 1

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

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

Answer 2

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

../images/outbound-blue.png

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

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

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

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