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">
	<hlayout>
		<vlayout>
			<button label="Switch Image">
				<attribute name="onClick"><![CDATA[
					image.setContent(new org.zkoss.image.AImage("t", 
						desktop.webApp.getResourceAsStream((odd = !odd) ? 
							"/widgets/multimedia/dynamic_image/img/image2.png" : 
							"/widgets/multimedia/dynamic_image/img/image1.png")));				
				]]></attribute>
			</button>
			<image id="image" src="/widgets/multimedia/dynamic_image/img/image1.png" />
		</vlayout>
		<vlayout>
			<button label="Render Image" onClick="update()" />
			<image id="img" />
		</vlayout>
	</hlayout>
	<zscript><![CDATA[
		import java.awt.*;
		import java.awt.image.*;
		import java.awt.geom.*;
		boolean odd = false;
		boolean odd1 = false;
		
		void update() {
			BufferedImage bufferimg = newimg((odd1 = !odd1));
			img.setContent(bufferimg);
		}
		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;
		}
		BufferedImage bufferimg = newimg(false);
		img.setContent(bufferimg);
	]]></zscript>
</window>