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
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • 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
  • http://www.hhraweb.com 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.

  • http://www.hhraweb.com 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″?

  • http://www.mkyong.com/jsf2/jsf-2-graphicimage-example/ sassou

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

  • Pingback: JSF 2.0 Tutorial()

  • Max

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

    • JSF 2
       &lt;h:graphicImage library=&quot;icons&quot; name=&quot;remove-icon.png&quot;/&gt;