ZK Component Reference/Essential Components/Image

Image

• Demonstration: Image
• Java API: Image
• JavaScript API: Image
• Style Guide: N/A

Employment/Purpose

An image component is used to display an image at the browser. There are two ways to assign an image to an image component. First, you could use the src property to specify a URI where the image is located. This approach is similar to what HTML supports. It is useful

if you want to display a static image, or any image that can be identified by URL.

 <image src="/my.png">

Like using any other properties that accept an URI, you could specify "*" for identifying a Locale dependent image. For example, if you have different image for different Locales, you could use as follows.

 <image src="/my*.png">

Then, assume one of your users is visiting your page with de_DE as the preferred Locale.

Zk will try to locate the image file called /my_de_DE.png. If not found, it will try

/my_de.png and finally /my.png.

Locale Dependent Image

You can specify "*" for identifying a Locale dependent image. For example, if you have different image for different Locales, you could use the following code.

<image src="/my*.png"/>

Assuming one of your users is visiting your page with de_DE as the preferred Locale. Zk will try to locate the image file called /my_de_DE.png. If it is not found, it will try /my_de.png and finally /my.png.

Please refer to the Browser and Locale Dependent URI section in the Internationalization chapter for details.

Secondly, you could use the setContent method to set the content of an image to an image component directly. Once assigned, the image displayed at the browser is updated automatically. This approach is useful if an image is generated dynamically.

For example, you can generate a map for the location specified by a user as demonstrated below.

<zk>
	Location: <textbox onChange="updateMap(self.value)"/>
	Map: <image id="image"/>
	<zscript><![CDATA[	
		void updateMap(String location) {
			if (location.length() > 0) {
				org.zkoss.image.AImage img = new org.zkoss.image.AImage(location);
				image.setContent(img);
			}
		}
	]]>
	</zscript>
</zk>

In the above example, we assume you have a class named MapImage for generating a map of the specified location.

Notice that the image component accepts the content encapsulated by the org.zkoss.image.Image format. If the image generated by your tool is not in this format, you can use the org.zkoss.image.AImage class to wrap a binary array of data, a file or an input stream into the Image interface.

In traditional Web applications, caching a dynamically generated image is complicated, however with the image component, you don't need to worry about it. Once the content of an image is assigned, it belongs to the image component, and the memory it occupies will be released automatically when the image component is no long used.

Tip: If you want to display the content other than an image, say a PDF, you can use the iframe component. Please refer to the relevant section for details.

Example

 <image src="/my.png">

Supported Events

Name	Event Type
None	None

• Inherited Supported Events: XulElement

Supported Children

*None

Use Cases

Version	Description	Example Location

Version History

Version	Date	Content