Как ссылаться на ресурс изображений JSF как URL-адрес фонового изображения CSS

Я часто меняю изображения своих кнопок с помощью атрибута изображения, но кто-то сказал мне, что это хорошая практика, чтобы сделать это, используя .css Я пытался, но я не могу, что я делаю неправильно? Это то, что я сделал:

1-Ресурсы моего проекта хранятся следующим образом:

enter image description here

2. Вот как я создал style.css для доступа к изображению

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3. Так я получаю доступ к css из тела моей страницы (я уверен, что это правильно, потому что другие классы в одном документе работают в других тегах на этой странице)

<h:outputStylesheet library="css" name="style.css"  />

4. Вот как создать образец commandButton, который использует присваиваемый класс css

<h:commandButton styleClass="c2"/>

Я думаю, что проблема в .css, я пробовал несколько комбинаций, но никто не работал:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg);

Где ошибка?

Обновление Мне удалось заставить его работать по следующему коду:

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

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

enter image description here

Как я могу решить эту проблему, чтобы показать изображение удержания?

ОТВЕТЫ

Ответ 1

При импорте стилей CSS стилей <h:outputStyleSheet> таблица стилей импортируется и обрабатывается с помощью FacesServlet через /javax.faces.resource/*. Посмотрите на сгенерированный элемент <link>, указывающий на таблицу стилей, и вы поймете.

Вместо этого вы должны изменить все зависимости url(), чтобы использовать #{resource['library:location']}. Затем JSF автоматически заменит его правильным путем. Учитывая структуру вашей папки, вам нужно заменить

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

по

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

Предполагая, что ваше имя контекста webapp playground и что ваш FacesServlet отображается в *.xhtml, то приведенное выше должно быть в возвращенном файле CSS следующим образом

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

Отмечается, что реализация JSF будет определяться только во время первого запроса в файле CSS, если она содержит выражения EL. Если это не так, то для эффективности больше не будет попытки EL-оценить содержимое файла CSS. Поэтому, если вы впервые добавите выражение EL в файл CSS, вам нужно будет перезапустить все приложение, чтобы заставить JSF повторно проверить файл CSS.

Если вы хотите ссылаться на ресурс из библиотеки компонентов, такой как PrimeFaces, то префикс имени библиотеки, разделенный :. Например. когда вы используете тему "Начало" PrimeFaces, которая идентифицируется primefaces-start

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

Это будет сгенерировано как

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

См. также:

Несвязанный к конкретной проблеме, способ использования library не совсем прав. Он должен быть общим идентификатором/подпапкой всех связанных ресурсов CSS/JS/image. Основная идея заключается в том, чтобы изменить весь внешний вид, просто изменив library (что может быть сделано EL). Однако вам кажется, что вы полагаетесь на библиотеку по умолчанию. В этом случае вы можете просто опустить library из <h:outputStyleSheet> и #{resource}.

<h:outputStylesheet name="css/style.css"  />

См. также:

Ответ 2

Поскольку я немного боролся с этим, и хотя BalusC уже ответил на вопрос, но мог бы прокомментировать, почему это происходит. У меня 5 проектов EAR, состоящих из объединенных проектов WAR и EJB. Затем у меня есть отдельный автономный проект WAR. Следующий код работал отлично со всеми EAR:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Если папка "img" находилась в папке WEB-INF, но для проекта EAR она не работала, и даже не загрузила картинку в браузере, вручную набрав URL-адрес. Я подтвердил, что полученный html был на 100% точным. Итак, все разговоры о "ресурсах" заставили меня подумать, что, возможно, это была "безопасность"? проблема, которая, похоже, не имеет смысла между развертываниями WAR и EAR, поэтому я создал папку "resources" в корневом каталоге веб-приложения, например. в Eclipse его родителем будет WebContent, а затем добавлена ​​подпапка к ресурсам под названием "img", разместила там свое изображение.

Теперь код выглядит следующим образом:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

И теперь изображение отображается. Снова не пытаясь полностью захватить балус, я просто хотел поднять его на случай, если кто-нибудь столкнется с подобной проблемой. Если кто-то хочет, чтобы я открыл отдельный Q и A, я буду!

Ahh да, это было на JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Изменить @Базиль-Бурк ответ Что такое WEB-INF, используемое в веб-приложении Java EE, кажется довольно релевантным

Но его все еще немного путают в том, как может WAR в EAR получить доступ к этому местоположению, но не к автономной WAR?