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

Question

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

1-Ресурсы моего проекта хранятся так:

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

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

3-Так я получаю доступ к CSS из тела моей страницы (я уверен, что это правильно, потому что другие классы в том же документе работают с другими тегами на этой странице) <h:outputStylesheet library="css" name="style.css" /> 4 - так создается образец кнопки команды, в которой используется соответствующий класс 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 (справа) и когда я использую атрибут изображения (слева)

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

Answer 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']}");  
}

Предполагая, что имя контекста вашего веб-приложения имеет значение 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");
}

См. Также:

• Как ссылаться на ресурс CSS / JS / изображения в шаблоне Facelets?
• Изменение префикса JSF для сопоставления суффикса вынуждает меня повторно применять сопоставление для фоновых изображений CSS

---

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

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

См. Также:

• Что такое JSFБиблиотека ресурсов и как ее использовать?

Answer 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, и AI будет!

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

Редактировать @ ответ Бэзила-Бурка Для чего используется WEB-INF в веб-приложении Java EE кажется довольно уместным

Но это все еще немного сбивает с толку, как можноВОЙНА в пределах EAR для доступа к этому местоположению, но не для отдельной WAR?