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

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

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

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 (справа) и когда я использую атрибут изображения (слева)

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

Источник

2 ответа

Решение

При импорте таблиц стилей 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 "Start" тема, которая определяется 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"  />

Смотрите также:

Источник

Так как я немного боролся с этим и пока 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">
.
.
.

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

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

Edit @ Basil-Bourque answer То, для чего используется WEB-INF в веб-приложении Java EE, кажется весьма актуальным

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

Источник
Другие вопросы по тегам