Main Tutorials

JSF 2 graphicImage example

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 :

jsf2-graphicImage-example

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.

Download Source Code

Download It – JSF-2-GraphicImage-Example.zip (14KB)

Reference

  1. JSF <h:graphicImage /> JavaDoc

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
13 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Szparag
10 years ago

Thank you! Was so simple but couldn’t find this way only via #{resources}.

Saast
3 years ago

Thank you so much for showing which directory is the working directory!

Blas
3 years ago

if it doesn’t work, sometimes you need to place /

Ntwali Aime Vivens
4 years ago

How can i preview an image when uploaded

Vinicius
5 years ago

Thank you very much

Manoj
10 years ago

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

Manoj
10 years ago
Reply to  Manoj
DougMH
10 years ago

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.

DougMH
10 years ago

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″?

sassou
10 years ago

How to add Image from database to a jsf page using EJB

Aniruddha Mahato
8 years ago
Reply to  sassou

I am facing the same problem. How to add an blob image data in graphic image without saving temporary image!

Max
12 years ago

What about folders inside? I mean if there is a folder inside library something like: resources/images/icons/remove-icon.png

JSF 2
11 years ago
Reply to  Max
 <h:graphicImage library="icons" name="remove-icon.png"/>