JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:graphicImage/> component. The graphicImage component renders an HTML image tag. This tag renders the HTML “img” element. If you are looking for the configuration of complete application, please read our JSF 2 Setup Tutorial.
1. The Views
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:graphicImage value="/resources/images/jvmhost.png" width="80px" height="80px"/> </html>
- The graphicImage component accept a value that reference the path of an image.
- The image that the graphicImage referenced is located under resources/images folder.
2. Images Folder
In the JSF 2 application you have the ability to add an images folder under the context root of your web application. The below snapshot will show you the real location of the images that being used.
3. JSF 2 GraphicImage Demo
The below snapshot will show you a running sample of GraphicImage example.