Accesso le immagini con i CSS url() in primefaces

Question

Questo è dalla documentazione primefaces:

icone dei pulsanti

Un'icona su un pulsante viene visualizzato utilizzando CSS e l'attributo dell'immagine.

<p:commandButton value=”With Icon” image=”disk”/> 

<p:commandButton image=”disk”/> 

.disk è una semplice classe CSS con una proprietà sfondo:

.disk { background-image: url (‘disk.png’) importante; }

La mia domanda è: dove punta questo url()? In altre parole, dove dovrei inserire le mie immagini in modo che il CSS possa accedervi?

Ho provato/risorse,/risorse/img, senza fortuna. Sì, funzionava con un URL assoluto (uno che include il percorso di contesto), ma ciò rende l'applicazione non portatile.

Answer 1

Sembra che la tua domanda è più interessato agli aspetti lato client di cose, quindi, anche se non so primefaces, ecco una pugnalata a rispondere è:

percorsi CSS sono relative alla posizione del dove viene dichiarata la regola CSS.

Se questo è nel codice HTML (in uno stile < > blocco), quindi disk.png deve essere nella stessa directory del file.

Se questa regola si trova in un file CSS separato, disk.png deve trovarsi nella directory in cui si trova il file CSS.

Se si creano immagini di directory, anche la directory sarà relativa dal CSS.

Spero che questo aiuti?

Answer 2

Soluzione semplice:

se si utilizza JavaServer Faces 2.0 si ha la possibilità di mettere tutte le risorse all'interno di directory appositamente progettato. Quindi, è necessario disporre di questa struttura di cartelle nel web app:

-rootdir 
--resources 
---images 
----disk.png 

E per ricevere l'immagine di sfondo css si dovrebbe digitare qualcosa di simile:

.disk { 
background: url(#{resource['images/disk.png']}) !important; 
} 

Answer 3

Ho affrontato lo stesso problema per un attimo e ho calcolare la documentazione a riguardo non è chiaro! Funziona in questo modo per primefaces commandButton e simili (menuItem, sottomenu, ecc):

Quello che ho fatto è:

• scaricare un tema dalla libreria dei temi nel sito web primefaces (esempio: Aristo o redmond) .
• Unzip l'archivio per l'applicazione web risorse cartella, (nel mio caso: root/risorse/css/aristo
• Si noti che nella cartella aristo avete: theme.css cartella e/immagini in cui un'immagine png indicizzata contiene tutte le icone utilizzate dal tema
• Se apri il file theme.css, noterai che per accedere a un'icona di immagine indicizzata devi chiamare due classi: .ui-icon e .ui -icon-theiconyouwant (l'icona .ui recupera l'indice png utilizzando #{resource['primefaces.......png']} e .ui-icon-agivenicon delimitano l'icona con la sua posizione X & Y (indice) nell'immagine png).
• Ora invia theme.css nell'applicazione, utilizzando **<h:outputStyleSheet />**. il modo migliore per farlo è tra i tag del modello.
• Quindi nel tuo XHTML o jsp, fare **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Ora, se si desidera aggiungere le vostre immagini personali da usare con un <p:commandButton, creare classi in theme.css:

  .smiley { background-image: url ("# {resource ['images/smiley.png']}")! important;/questo sarà ignorato da Internet Explorer se non compatibile/ larghezza: 16px; altezza: 16px; }

  Normalmente JSF accede alla prima cartella di immagini disponibile all'interno della cartella delle risorse.

• Ora fare: <p:commandButton image="smiley" value="Smile" />