- JSF Tutorial
- JSF - Home
- JSF - Overview
- JSF - Environment Setup
- JSF - Architecture
- JSF - Life Cycle
- JSF - First Application
- JSF - Managed Beans
- JSF - Page Navigation
- JSF - Basic Tags
- JSF - Facelet Tags
- JSF - Convertor Tags
- JSF - Validator Tags
- JSF - DataTable
- JSF - Composite Components
- JSF - Ajax
- JSF - Event Handling
- JSF - JDBC Integration
- JSF - Spring Integration
- JSF - Expression Language
- JSF - Internationalization
- JSF Useful Resources
- JSF - Quick Guide
- JSF - Useful Resources
- JSF - Discussion
JSF - h:graphicImage
The h:graphicImage tag renders an HTML element of the type "img".
JSF Tag
<h:graphicImage value = "http://www.tutorialspoint.com/images/jsf-mini-logo.png"/>
Rendered Output
<img src = "http://www.tutorialspoint.com/images/jsf-mini-logo.png" />
Tag Attributes
S.No | Attribute & Description |
---|---|
1 | id Identifier for a component |
2 | binding Reference to the component that can be used in a backing bean |
3 | rendered A boolean; false suppresses rendering |
4 | styleClass Cascading stylesheet (CSS) class name |
5 | value A component’s value, typically a value binding |
6 | alt Alternative text for nontextual elements such as images or applets |
7 | dir Direction for text. Valid values are ltr (left to right) and rtl (right to left) |
8 | lang Base language of an element’s attributes and text |
9 | style Inline style information |
10 | tabindex Numerical value specifying a tab index |
11 | target The name of a frame in which a document is opened |
12 | title A title, used for accessibility, that describes an element. Visual browsers typically create tooltips for the title’s value |
13 | usemap Usemap of an element |
14 | url Url of the image |
15 | width Width of an element |
16 | onblur Element loses focus |
17 | onchange Element’s value changes |
18 | onclick Mouse button is clicked over the element |
19 | ondblclick Mouse button is double-clicked over the element |
20 | onfocus Element receives focus |
21 | onkeydown Key is pressed |
22 | onkeypress Key is pressed and subsequently released |
23 | onkeyup Key is released |
24 | onmousedown Mouse button is pressed over the element |
25 | onmousemove Mouse moves over the element |
26 | onmouseout Mouse leaves the element’s area |
27 | onmouseover Mouse moves onto an element |
28 | onmouseup Mouse button is released |
Example Application
Let us create a test JSF application to test the above tag.
Step | Description |
---|---|
1 | Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter. |
2 | Modify home.xhtml as explained below. Keep rest of the files unchanged. |
3 | Compile and run the application to make sure business logic is working as per the requirements. |
4 | Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver. |
5 | Launch your web application using appropriate URL as explained below in the last step. |
home.xhtml
<!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"> <head> <title>JSF Tutorial!</title> </head> <body> <h2>h:graphicImage example</h2> <hr /> <h:form> <h3>Image</h3> <h:graphicImage value = "/images/jsf-mini-logo.png"/> </h:form> </body> </html>
Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce the following result.