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

Я хочу ссылаться на изображение в моей основной таблице стилей для приложения 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 в свой код, потому что я хочу управлять изображением через стили.

Итак, что я делаю неправильно?

Ответы

Ответ 1

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

../images/outbound-blue.png

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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