The image component can either display an image file given its path or an image rendered dynamically using Java's graphical APIs.

<window border="normal" width="500px" apply="demo.multimedia.DynamicImageComposer">
	<hlayout>
		<vlayout>
			<button id="switchImageBtn" label="Switch Image" />
			<image id="image" src="/widgets/multimedia/dynamic_image/img/image1.png" />
		</vlayout>
		<vlayout>
			<button id="renderImageBtn" label="Render Image" />
			<image id="img" />
		</vlayout>
	</hlayout>
</window>

package demo.multimedia;

import org.zkoss.image.AImage;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Desktop;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Image;

import java.awt.*;
import java.awt.geom.Line2D;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.IOException;

public class DynamicImageComposer extends SelectorComposer<Component> {

    @Wire
    private Image image;
    @Wire
    private Image img;

    private boolean odd = false;
    private boolean odd1 = false;

    @Listen("onClick = #switchImageBtn")
    public void switchImage(Event event) throws IOException {
        Desktop desktop = event.getTarget().getDesktop();
        image.setContent(new AImage("t",
                desktop.getWebApp().getResourceAsStream((odd = !odd) ?
                        "/widgets/multimedia/dynamic_image/img/image2.png" :
                        "/widgets/multimedia/dynamic_image/img/image1.png")));
    }

    @Listen("onClick = #renderImageBtn")
    public void update() {
        BufferedImage bufferimg = newimg((odd1 = !odd1));
        img.setContent(bufferimg);
    }

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        BufferedImage bufferimg = newimg(false);
        img.setContent(bufferimg);
    }

    private BufferedImage newimg(boolean update) {
        BufferedImage bi = new BufferedImage(150, 150, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2d = bi.createGraphics();
        g2d.setStroke(new BasicStroke(5));
        Line2D line = update ? new Line2D.Double(10, 10, 130, 130) : new Line2D.Double(10, 130, 130, 10);
        Rectangle2D retangle = new Rectangle2D.Double(25, 25, 85, 85);
        g2d.setColor(update ? Color.cyan : Color.RED);
        g2d.draw(line);
        g2d.setColor(update ? Color.yellow : Color.pink);
        g2d.draw(retangle);
        return bi;
    }
}