Images and Icons

Question 1

Image Component

Answer 1

The Image component allows you to embed images. It’s a wrapper around the HTML <img></img> element. You can display either static images or images generated on the fly.

Question 2

Image Static Resources

Answer 2

A servlet container can serve images as static resources. This is more efficient than streaming them through the application, as described later. You can also serve static resources from a frontend server.

Image image = new Image(“images/myimage.png”, “My Alt Image”);
add(image);

Question 3

Image Stream Resources

Answer 3

You can use StreamResource to load images from the Java class path. In this case, the images need to be below src/main/resources in the Java compilation path. The path for getResourceAsStream() is relative to that path. You need to include the leading /.

StreamResource imageResource = new StreamResource(“myimage.png”,
() -> getClass().getResourceAsStream(“/images/myimage.png”));

Image image = new Image(imageResource, “My Streamed Image”);
add(image);

Question 4

Icons

Answer 4

Icons are small graphical symbols intended to represent the various functions of an application, as well as different types of data. Vaadin has over 600 built-in icons for you to use in your applications.
Icon icon = new Icon(“vaadin”, “moon”);
add(icon);