Access images using url () in Primefaces

Question

This is from Primefaces docs:

Button Icons

The icon on the button is displayed using CSS and the image attribute.

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

.disk is a simple css class with background:

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

My question is: what does this url () point to? In other words, where should I put my images so that CSS can access it?

I tried / resources, / resources / img, no luck. Yes, it worked with an absolute URL (which includes the context path), but that makes the application not portable.

Answer 1

It seems that your question is more about aspects of the client side, so although I don't know Primefaces, here's a hit on it:

CSS paths refer to the location where the CSS rule is declared.

If it is in your HTML (in the <style> block), then disk.png should be in the same directory as your file.

If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is located.

If you create catalog images, the catalog will also be CSS related.

Hope this helps?

Answer 2

A simple solution:

IF you use JavaServer Faces 2.0, you have a chance to place all the resources inside a specially designed directory. Therefore, you need to have this folder structure in your web application:

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

And in order to get the image in css background, you have to enter something like this:

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

Answer 3

I ran into the same problem for a moment, and I find that the documentation about this is incomprehensible! It works this way for Primefaces commandButton and similar (menuItem, submenu, etc.):

What I've done:

• Download a theme from the theme library on the PrimeFaces website (for example: aristo or redmond).
• Unzip the archive to the web application resources folder (in my case: root / resources / css / aristo
• Please note that in the aristo folder you have: theme.css and / images folder, where the indexed png-image contains all the icons used by the theme.
• If you open the .css theme, you will notice that in order to access the icon with the indexed image, you must call two classes: .ui-icon and .ui-icon-theiconyouwant (the .ui-identifier icon extracts the png index using #{resource['primefaces.......png']} and .ui-icon-agivenicon, divides the icon by its position X and Y (index) in the png image).
• Now output the theme.css application to your application using **<h:outputStyleSheet />**. The best way to do this is between the tags of your template.
• So, in your xhtml or jsp, do **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Now, if you want to add your personal images for use with <p:commandButton , create classes in theme.css:

  .smiley {background-image: url ("# {resource ['images / smiley.png']}")! important; / this will be ignored by Internet Explorer, if not compatible / width: 16 pixels; height: 16 pixels; }

  Typically, JSF accesses the first image folder available in your resource folder.

• Now do: <p:commandButton image="smiley" value="Smile" />