accediendo a imágenes con CSS url() en Primefaces

Question

Esto es de la documentación PrimeFaces:

iconos de los botones

Un icono en un botón se visualiza usando CSS y atributo de imagen.

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

<p:commandButton image=”disk”/> 

.disk es una clase css simple con un fondo propiedad:

.disk { Imagen de fondo: url (‘disk.png’) importante; }

Mi pregunta es: ¿a dónde apunta este url()? En otras palabras, ¿dónde debería poner mis imágenes para que el CSS pueda acceder a ellas?

He intentado/resources,/resources/img, no tuve suerte. Sí, estaba trabajando con una URL absoluta (una que incluye la ruta de contexto), pero eso hace que la aplicación no sea portátil.

Answer 1

Parece que su pregunta se refiere más a los aspectos del lado del cliente de las cosas, así que aunque no sé Primefaces, he aquí una puñalada en contestarla:

caminos CSS son en relación con la ubicación de donde se declara la regla de CSS.

Si esto está en su HTML (en un bloque <style>), disk.png debe estar en el mismo directorio que su archivo.

Si esta regla se encuentra en un archivo CSS por separado, entonces disk.png debe estar en el directorio donde se encuentra el archivo CSS.

Si crea un directorio de imágenes, entonces el directorio también será relativo desde el CSS.

Espero que ayude?

Answer 2

solución simple:

si está utilizando JavaServer Faces 2.0 se tiene la oportunidad de poner todos los recursos dentro del directorio especialmente diseñado. Así que hay que tener esta estructura de carpetas en la aplicación web:

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

Y para recibir la imagen de fondo CSS debería escribir algo como esto:

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

Answer 3

que enfrentan el mismo problema por un momento y yo reconocer la documentación al respecto no está claro! Funciona de la siguiente manera para Primefaces commandButton y similares (menuItem, submenú, etc.):

Lo que hice es:

• descargar un tema desde la biblioteca del tema en la página web PrimeFaces (ejemplo: Aristo o Redmond) .
• descomprimir el archivo para su aplicación web recursos carpeta, (en mi caso: Aristo root/recursos/css/
• en cuenta que en la carpeta Aristo tiene: theme.css carpeta y/imágenes donde una imagen png indexada contiene todos los iconos utilizados por el tema.
• Si abre el theme.css, verá que para acceder a un icono de imagen indexada debe llamar a dos clases: .ui-icon y .ui -icon-theiconyouwant (el icono .ui recupera el índice png usando #{resource['primefaces.......png']} y .ui-icon-agivenicon delimitan el icono por su X & Posición Y (índice) en la imagen png).
• Ahora imprima el theme.css en su aplicación, usando **<h:outputStyleSheet />**. La mejor manera de hacerlo es entre las etiquetas de su plantilla.
• Así que en su XHTML o JSP, hacer **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Ahora bien, si desea añadir sus imágenes personales de usar con un <p:commandButton, crear clases en theme.css:

  .smiley { Imagen de fondo: url ("# {recurso ['images/smiley.png']}"! importante;/esto será ignorado por Internet Explorer si no es compatible/ ancho: 16px; altura: 16px; }

  Normalmente, JSF accede a la primera carpeta de imágenes disponible en la carpeta de recursos.

• Ahora hacemos: <p:commandButton image="smiley" value="Smile" />