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.

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

Second, you could use the setContent method to assign the content of an image into 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 could generate a map for the location specified by a user as below.

Location: <textbox onChange="updateMap(self.value)"/>
Map: <image id="image"/>
<zscript>
    void updateMap(String location) {    
        if (location.length() > 0)        
            image.setContent(new MapImage(location));            
    }    
</zscript>

In the above example, we assume you have a class called MapImage for generating a map of the specified location, which is so-called business logic.

Notice that the image component accepts the content only in the org.zkoss.image.Image interface. If the image generated by your tool is not in this format, you could 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 complicate. 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 after the image component is no long used.

Tip: If you want to display the contents, say PDF, other than image and audio, you could use the iframe component. Refer to the relevant section for details.