JSF graphicImage Tag

This section explains about "graphicImage" tag. This displays the image on the page. This tag renders an html "img" element. This tag renders the image file stored in the location specified in the "value" attribute of "graphicImage" tag. If this  image file is not present in the specified location then the value of the alt attribute is displayed instead of the desired image file. In this example, value attribute is set to the location "/image/rose.gif" in the web-application root directory and alt attribute is set to "The image could not be found.". So this image is displayed on the page, if there is any problem in getting this image file ("/image/rose.gif") then the text specified in the alt attribute ("The image could not be found.") is displayed on the page.  We can set width, height of the image. If we want tooltip for this image to be displayed when focus comes to the image, then we can use title attribute. There are several attributes of this tag to give it different look and structure.

This section provides you the code that uses this tag and some of its attributes to render the image on the page. 

Code Description :

Rendered Output :

Html Source Code :

All attributes of  graphicImage tag have been described  below:

• id : This is the identifier for the component. This must be the unique value within the closest parent component.
• alt : This is standard html attribute. This is the alternate textual value to be displayed in the absence of the image file specified in the value attribute.
• value : This attribute takes context relative URL to the image. URL  is called  relative to the context path of the web-application if URL starts with '/'. This image is rendered, if present, on the page. 
• url : Its an alias for the value attribute.
• width : It is used to set new width of the image over the natural width.
• height :It is used to set new height of the image over the natural height.
• title : This is standard html attribute. It sets the tooltip for the component.
• rendered : It takes boolean value. Its default value is "true". It indicates whether the component should be rendered or not.
• dir : It sets the direction of the text to be displayed. It can take two values "LTR" (Left to Right) and "RTL" (Right to Left).
• lang : This is a standard html attribute. It is used to describe the base language used in the markup generated for this component.
• ismap : This takes a boolean value. This is used to indicate whether this image is to be used as a server side image or not.
• onclick : It sets the Java Script code to be invoked when the element is clicked.
• ondblclick :  It sets the Java Script code to be invoked when the element is double-clicked.
• onkeydown : It sets the Java Script code to be invoked when a key is pressed down over this element.
• onkeypress : It sets the Java Script code to be invoked when a key is pressed over this element.
• onkeyup : It sets the Java Script code to be invoked when a key is released over this element.
• onmousedown : It sets the Java Script code to be invoked when the pointing device is pressed over this element.
• onmousemove :   It sets the Java Script code to be invoked when the pointing device is moved within this element.  
• onmouseout : It sets the Java Script code to be invoked when the pointing device is moves out of this element.
• onmouseover : It sets the Java Script code to be invoked when the pointing device is moved into this element.
• onmouseup : It sets the Java Script code to be invoked when the pointing device is released over this element.
• style : This is used to set the CSS style definition which will be applied to the component when it is rendered.    
• styleClass : This is used to set the CSS class which will be applied to the component when it is rendered.    
• usemap : This is html map element. This describes the name of client side image map for which this element provides the image.
• binding : Its a value binding expression that is used to link the component to the backing bean property.