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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Szparag
Guest
Szparag

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

Manoj
Guest
Manoj

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
Guest
Manoj
DougMH
Guest
DougMH

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
Guest
DougMH

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
Guest
sassou

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

Aniruddha Mahato
Guest
Aniruddha Mahato

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

trackback
JSF 2.0 Tutorial

[…] JSF 2 graphicImage example Display image with <h:graphicImage> tag. […]

Max
Guest
Max

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

JSF 2
Guest
JSF 2
 <h:graphicImage library="icons" name="remove-icon.png"/>