View Source

h2. Overview
_Since 4.0_

The ace:graphicImage component displays an image by specifying either a URL, a byte array, or an instance of {{org.icefaces.ace.util.IceOutputResource}}.

{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=graphicImageBean] of this component, complete with source code.{tip}

h2. Getting Started

To use the GraphicImage component, specify a URL where the image is located or specify a byte array value that contains the encoded image or an instance of {{org.icefaces.ace.util.IceOutputResource}}.
{code:xml}
<!-- Image loaded via URL -->
<ace:graphicImage url="http://path.to/image.png" />
<!-- Image loaded via byte array -->
<ace:graphicImage value="#{bean.byteArrayImage}" />
<!-- Image loaded via IceOutputResource -->
<ace:graphicImage value="#{bean.resourceImage}" />
{code}

h2. Attributes

{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/v4_latest/ace/tld/ace/graphicImage.html].{tip}

{panel}
The value of the *url* attribute is directly rendered as the value of the {{src}} attribute in the {{<img>}} element, which should be the location of the image to display.
{panel}

{panel}
The *value* attribute is used to specify a byte array in a backing bean or an instance of IceOutputResource as the image to be displayed.
{panel}

{panel}
The *style* and *styleClass* attributes work just as in other components, and they are applied to the {{<img>}} element.
{panel}

h2. Event Listeners

None.

h2. Client Behavior Events

None.

h2. JavaScript API

Not applicable.

h2. Keyboard Support

None.

h2. CSS Classes

This component doesn't use any default CSS class names. The custom class names and styling specified in {{styleClass}} and {{style}} are applied on the {{img}} element.

h2. Known Issues

None.

h2. Additional Resources


h4. Tutorials

This component appears in the following ICEfaces tutorials:

*None*