Jak odwołać się do JSF image resource jako CSS background image url

Często zmieniam obrazy moich przycisków za pomocą atrybutu image, ale ktoś mi powiedział, że jest to dobra praktyka, aby to zrobić za pomocą .css Próbowałem, ale nie mogę, co robię źle? Tak zrobiłem:

1-zasoby mojego projektu są przechowywane tak:

Tutaj wpisz opis obrazka

2-tak stworzyłem ten styl.css do dostępu do obrazu 

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

3-w ten sposób uzyskuję dostęp do css z treści mojej strony(jestem pewien, że jest to poprawne, ponieważ inne klasy w tym samym dokumencie działają w innych znacznikach na tej stronie) 

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

4-w ten sposób tworzymy przykładowy przycisk polecenia, który używa odpowiedniej klasy css 

<h:commandButton styleClass="c2"/>

Myślę, że problem jest w .css, próbowałem kilku kombinacji, ale żadna nie zadziałała: 

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

Gdzie jest błąd?

Aktualizacja Udało mi się to zrobić za pomocą następującego kodu: 

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

Zauważ różnicę kiedy używam css (po prawej) i kiedy używam image atrybut (lewy)

Tutaj wpisz opis obrazka

Jak mogę to rozwiązać, aby obraz wstrzymania został pokazany?

Author: BalusC, 2011-08-03
Source

2 answers

Podczas importowania arkuszy stylów CSS przez <h:outputStyleSheet>, Arkusz stylów jest importowany i przetwarzany przez FacesServlet przez /javax.faces.resource/*. Spójrz na wygenerowany element <link> wskazujący na dany arkusz stylów, a zrozumiesz.

Musisz zmienić wszystkie url() zależności, aby zamiast tego użyć #{resource['library:location']}. JSF automatycznie zastąpi go właściwą ścieżką. Biorąc pod uwagę strukturę folderów, musisz zastąpić 

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

By 

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

Zakładając, że nazwa kontekstu webapp to playground i jeśli twój FacesServlet jest mapowany na *.xhtml, to powyższe powinno skończyć się w zwracanym pliku CSS w następujący sposób 

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

Należy zauważyć, że implementacja JSF określi tylko podczas pierwszego żądania w pliku CSS, jeśli zawiera wyrażenia EL. Jeśli tak się nie stanie, to dla efektywności nie będzie już próbował el-ewaluować zawartości pliku CSS. Więc jeśli dodasz wyrażenie EL do pliku CSS po raz pierwszy, musisz ponownie uruchomić całą aplikację, aby uzyskać JSF sprawdź ponownie plik CSS.

W przypadku, gdy chcesz odwołać się do zasobu z biblioteki komponentów, takich jak PrimeFaces, następnie przedrostek nazwy biblioteki, oddzielony :. Na przykład, gdy używasz PrimeFaces "Start" motyw, który jest identyfikowany przez primefaces-start 

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

To zostanie wygenerowane jako 

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

Zobacz też:

Niezwiązane z konkretnym problemem, sposób, w jaki używasz library nie jest całkowicie właściwy. Ma to być wspólny identyfikator / podfolder wszystkich powiązanych zasobów CSS/JS / image. Kluczową ideą jest możliwość zmiany całego look ' n ' feel poprzez zmianę library (co może być zrobione przez EL). Wydajesz się jednak polegać na domyślnej bibliotece. W takim razie możesz po prostu pominąć library z Twoje <h:outputStylesheet> i #{resource}.

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

Zobacz też:

 59
Author: BalusC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:43

Ponieważ trochę się z tym zmagałem i podczas gdy BalusC już odpowiedział na pytanie, ale może będę w stanie skomentować, dlaczego tak się dzieje. Mam 5 projektów EAR składających się z połączonych projektów WAR I EJB. Następnie mam jeden samodzielny projekt wojenny wdrożony samodzielnie. Poniższy kod działał idealnie ze wszystkimi uchami: 

<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">
.
.
.

Gdzie folder" img " znajdował się w folderze WEB-INF, ale dla projektu EAR nie zadziałał i nie załadowałby nawet zdjęcia w przeglądarka poprzez ręczne wpisanie adresu URL. Zweryfikowałem, że wynikowy html był w 100% dokładny. Więc całe gadanie o "zasobach" dało mi do myślenia, że może to był ?Ochrona? problem, który nie ma sensu między wojną a wdrożeniami EAR, więc stworzyłem folder " resources "w korzeniu aplikacji internetowej, np. w Eclipse jego rodzicem byłby WebContent, a następnie dodał podfolder do zasobów o nazwie" img", umieścił tam mój obraz.

Kod teraz wygląda jak to: 

<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">
.
.
.

I teraz obraz jest wyświetlany. Ponownie nie próbując przejąć dokładnej odpowiedzi balusca, chciałem tylko poruszyć ten temat na wypadek, gdyby ktoś napotkał podobny problem. Jak ktoś chce żebym otworzyła osobne Q I A to zrobię!

Ahh tak, to było na JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Edit @ Basil-Bourque odpowiedź do czego służy WEB-INF w aplikacji internetowej Java EE wydaje się dość istotne

Ale jego nadal trochę mylące w tym, jak wojna w uchu może uzyskać dostęp do tego miejsca, ale nie samodzielna wojna?

 0
Author: JGlass,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-03 20:13:08