In JSF, you can use <h:graphicImage /> tag to render a HTML “img” element. For example, an image named “sofa.png” in a resources folder, see figure below :
1. JSF 1.x graphicImage
In JSF 1.x you can hard-coded above image URL directly in the “value” attribute :
JSF…
<h:graphicImage value="resources/images/sofa.png" />
HTML output…
<img src="resources/images/sofa.png;" alt="" />
2. JSF 2.x graphicImage
In JSF 2.0, you can render above image via “resource library” concept :
JSF…
<h:graphicImage library="images" name="sofa.png" />
HTML output…
<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" alt="" />
Note
For more detail, please read this JSF 2.0 resource library example.
For more detail, please read this JSF 2.0 resource library example.
Download Source Code
Download It – JSF-2-GraphicImage-Example.zip (14KB)
Thank you so much for showing which directory is the working directory!
if it doesn’t work, sometimes you need to place /
How can i preview an image when uploaded
Thank you very much
Thank you! Was so simple but couldn’t find this way only via #{resources}.
Hello MKyong,
My requirement is load the image from the linux system and I have to display in GUI.
In the above barCode path is /opt/weblogic/barcodes. But the image is not displaying in the GUI.
The logger prints like /opt/weblogic/barcodes/barcode_101.png
Can you help me on that?
Thanks
Manojkumar T
At some point could you put together an example of 1) h:commandLine shape=”rect” coords=”” and 2) h:graphicImage ismap=”true” usemap=”#AMap”?
I’ve been able to get h:graphicImage to work with a , but it will not point to my backing bean only html or a URL.
I have a rather large image and I only want a small portion of it to be clickable and I want that click to take me to my backing bean.
Here’s a question concerning h:graphicImage
These .PNG files have no border around them. Why do they not sit one on top of the other without space between? Especially with border=”0″ cellspacing=”0″ and cellpadding=”0″?
How to add Image from database to a jsf page using EJB
I am facing the same problem. How to add an blob image data in graphic image without saving temporary image!
What about folders inside? I mean if there is a folder inside library something like: resources/images/icons/remove-icon.png