Come fare riferimento alla risorsa immagine JSF come URL immagine di sfondo CSS

Io spesso, cambio le immagini dei miei pulsanti usando l’attributo dell’immagine, ma qualcuno mi ha detto che è una buona pratica farlo usando .css Ho provato ma non posso, cosa sto facendo di sbagliato? Questo è quello che ho fatto:

1-Le risorse del mio progetto sono archiviate in questo modo:

inserisci la descrizione dell'immagine qui

2-Ecco come ho creato lo style.css per accedere all’immagine

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

3-Questo è il modo in cui accedo al css dal corpo della mia pagina (sono sicuro che questo è corretto perché altre classi nello stesso documento funzionano in altri tag in questa pagina)

  

4: ecco come creare un comando commandButton che utilizza la class css appropriata

  

Penso che il problema sia nel file .css, ho provato alcune combinazioni ma nessuna ha funzionato:

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

Dov’è l’errore?

aggiornamento sono riuscito a farlo funzionare con il seguente codice:

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

Nota la differenza quando uso css (a destra) e quando uso l’attributo dell’immagine (a sinistra)

inserisci la descrizione dell'immagine qui

Come potrei risolvere questo per mostrare l’immagine di attesa?

Quando si importano fogli di stile CSS da , il foglio di stile viene importato ed elaborato da FacesServlet tramite /javax.faces.resource/* . Guarda l’elemento generato che punta al foglio di stile in questione e capirai.

Devi cambiare tutte le dipendenze url() per usare #{resource['library:location']} . JSF lo sostituirà automaticamente con il percorso corretto. Data la struttura della cartella, è necessario sostituire

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

di

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

Supponendo che il tuo nome di contesto webapp sia playground e che il tuo FacesServlet sia mappato su *.xhtml , allora il precedente dovrebbe finire nel file CSS restituito come segue

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

Si noti che l’implementazione JSF deve essere determinata solo durante la prima richiesta sul file CSS se contiene espressioni EL. In caso contrario, l’efficienza non tenterà più di EL-valutare il contenuto del file CSS. Pertanto, se si aggiunge un’espressione EL a un file CSS per la prima volta, è necessario riavviare l’intera applicazione per consentire a JSF di ricontrollare il file CSS.

Nel caso in cui si volesse fare riferimento a una risorsa da una libreria di componenti come PrimeFaces, quindi prefisso il nome della libreria, separato con : Ad esempio, quando si utilizza il tema “Start” di PrimeFaces identificato da primefaces-start

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

Questo sarà generato come

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

Guarda anche:

  • Come fare riferimento a CSS / JS / risorsa immagine nel modello Facelets?
  • La modifica del prefisso JSF alla mapping del suffisso mi costringe a riapplicare la mapping su immagini di sfondo CSS

Indipendentemente dal problema concreto, il modo in cui si utilizza la library non è del tutto corretto. È pensato per essere l’identificatore / sottocartella comune di tutte le risorse CSS / JS / immagine correlate. L’idea chiave è quella di essere in grado di cambiare l’intero look’n’fast cambiando semplicemente la library (cosa che può essere fatta da EL). Sembra che tu stia facendo affidamento sulla libreria predefinita . In tal caso, puoi semplicemente omettere la library dal tuo e #{resource} .

  

Guarda anche:

  • Qual è la libreria di risorse JSF e come dovrebbe essere utilizzata?

Dal momento che ho faticato un po ‘con questo e mentre BalusC ha già risposto alla domanda, ma potrebbe essere in grado di commentare perché questo sta accadendo. Ho 5 progetti EAR costituiti da progetti WAR e EJB in bundle. Quindi ho un progetto WAR autonomo distribuito da solo. Il codice seguente ha funzionato perfettamente con tutti gli EAR:

   Super FIPS Calculator PRO    . . . 

Dove la cartella “img” era all’interno della cartella WEB-INF ma per il progetto EAR, non funzionava e non avrebbe nemmeno caricato l’immagine nel browser digitando manualmente l’URL. Ho verificato che l’HTML risultante era accurato al 100%. Quindi tutte le chiacchiere sulle “risorse” mi hanno fatto pensare che forse era un? Sicurezza? problema di qualche tipo che sembra non avere senso tra le distribuzioni WAR e EAR quindi ho creato una cartella “risorse” nella root dell’applicazione web, ad esempio in Eclipse il suo genitore sarebbe WebContent, quindi ha aggiunto una sottocartella alle risorse chiamate “img” , ho messo la mia immagine lì dentro.

Il codice ora si presenta così:

   Super FIPS Calculator PRO    . . . 

E ora l’immagine viene visualizzata. Di nuovo, non tentando di dirottare la risposta esaustiva di balusc, volevo solo farlo apparire nel caso qualcuno si fosse imbattuto in un problema simile. Se qualcuno vuole che io apra un separato Q e AI lo farò!

Ah sì, questo era su JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Modifica @ Basil-Bourque risposta Qual è il WEB-INF utilizzato in un’applicazione web Java EE sembra abbastanza rilevante

Ma è ancora un po ‘di confusione in quanto può una GUERRA in un EAR accedere a quella posizione ma non una GU GUIDA indipendente?