java - welcome - Accediendo a imágenes con CSS url() en Primefaces

primefaces html5

Question

Esto es de los documentos Primefaces:

Iconos del botón

Se muestra un ícono en un botón usando CSS y atributo de imagen.

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

<p:commandButton image=”disk”/>

.disk es una clase simple de CSS con una propiedad de fondo:

.disk {background-image: url (''disk.png'') ! important; }

Mi pregunta es: ¿a dónde apunta esta 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, sin 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 tu pregunta está más relacionada con los aspectos del lado del cliente de las cosas, por lo que, aunque no conozco Primefaces, aquí hay una puñalada para responderla:

Las rutas CSS son relativas a la ubicación donde se declara la regla 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 separado, entonces disk.png debe estar en el directorio donde se encuentra el archivo CSS.

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

¿Espero que esto ayude?

Answer 2

Solución simple:

SI está utilizando JavaServer Faces 2.0, tiene la oportunidad de colocar todos los recursos dentro del directorio especialmente diseñado. Entonces necesitas tener esta estructura de carpetas en la aplicación web:

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

Y para recibir una imagen en segundo plano, debe escribir algo como esto:

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

Answer 3

¡Me enfrenté al mismo problema por un momento y reconozco que la documentación no está clara! Funciona de esta manera para Primefaces commandButton y similares (elemento del menú, submenú, etc.):

Lo que hice fue:

• Descargue un tema de la biblioteca de temas en el sitio web PrimeFaces (ejemplo: aristo o redmond).
• Descomprime el archivo en la carpeta de recursos de tu aplicación web (en mi caso: root / resources / css / aristo
• Tenga en cuenta que en la carpeta aristo usted tiene: theme.css y la carpeta / images donde una imagen indexada png contiene todos los iconos utilizados por el tema.
• Si abre el theme.css notará que para acceder a un ícono de imagen indexada debe llamar a dos clases: .ui-icon y .ui-icon-theiconyouwant (el ícono -ui recupera el png del índice usando #{resource[''primefaces.......png'']} y .ui-icon-agivenicon delimitan el icono por su posición X e Y (índice) en la imagen png).
• Ahora imprima el theme.css en su aplicación, usando **<h:outputStyleSheet />**. La mejor forma de hacerlo es entre las etiquetas de su plantilla.
• Entonces en tu xhtml o jsp, haz **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Ahora, si desea agregar sus imágenes personales para usar con un <p:commandButton , cree clases en theme.css:

  .smiley {background-image: url ("# {resource [''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 su carpeta de recursos.

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