JSF Showcase

h:graphicImage

HtmlImage is a UIGraphic component that renders an <img> element.

General Usage

The value attribute can be bound to a model bean property via EL, bound to a JSF resource via the #{resource} EL keyword, or using the library and name attributes to specify a JSF resource.
JSR 362 JSR 378

Source Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

	<!-- Example 1: Context-relative path to a resource via the value attribute -->
	<h:form>
		<h:graphicImage 
			value="/resources/images/jsf-logo-small.png" />
	</h:form>

	<!-- Example 2: JSF resource via the #{resource} EL keyword -->
	<h:form>
		<h:graphicImage value="#{resource['images:jsf-logo-small.png']}" />
	</h:form>

	<!-- Example 3: JSF resource via the library and name attributes -->
	<h:form>
		<h:graphicImage library="images" name="jsf-logo-small.png" />
	</h:form>

	<!-- Example 4: Clickable areas via the usemap attribute -->
	<h:form>
		<h:graphicImage usemap="#logoMapName" value="#{resource['images:jsf-logo-small.png']}" />
		<map name="logoMapName">
			<area alt="JSR 362" coords="1,1,110,136" href="https://jcp.org/en/jsr/detail?id=362" shape="rect" target="_blank"
				title="JSR 362" />
			<area alt="JSR 378" coords="110,1,190,136" href="https://www.jcp.org/en/jsr/detail?id=378" shape="rect"
				target="_blank" title="JSR 378" />
		</map>
	</h:form>

</ui:composition>
Liferay Faces Bridge Implementation 4.1.0 + Showcase Common 3.0.1 + Liferay Faces Util 3.1.0 + Mojarra 2.2.14