How to display images in Wicket

For someone starting out with Wicket, it can be tricky to figure out basic things like how to display images. Here are basic three scenarios:

1. Simple fixed image – no wicket code required:
HTML:

This is fine as long as you don’t need any control over the image.

2. Image set from code:
HTML:

JAVA:

.add(new Image("search_icon", new ContextRelativeResource("/images/search_icon.png")))

The ContextRelativeResource method here tells wicket to load the image from the images folder in your application (the same path as used in the relative src attribute used in the simple HTML example 1).

3. Image set using CSS:
HTML:

CSS:

.search {
	background-image: url(images/search_icon.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}

This approach is preferred for images which are really only part of the styling of the application (like say a green tick beside a list item) because it reduces the image to an an implicit part of a CSS class, allowing it to be restyled or removed without affecting the code. To change the CSS class of a component at runtime using wicket, you can use a wicket AttributeModifier to change the CSS class of the component.

Note: in the example above, the image path is relative to the referring stylesheet (so if the stylesheet is in the /CSS folder, the image will have to be in /CSS/images folder). However, since the image is simply part of the styles, it makes sense to keep such images together with the stylesheet.

.add(new AttributeModifier("class", true, new Model("search")));