BrokenImageFix

BrokenImageFix

View larger

Close

BrokenImageFix for Vaadin

Fix for broken images in browsers. If you use an com.vaadin.ui.Image with an com.vaadin.server.ExternalResource in modern browsers and the image isn't available, a broken image is shown. Since there is no built-in functionality to hide these images, there was the need to develop this feature.

This JavaScript Extension checks the given container for missing images and hides those. Therefore a style class is added to the surrounding container of the image. By default, the image itself is hidden and a background image is set to the surrounding container. This way the user is able to tell that there is an image, which isn't ready. CSS can be customized.

"is-broken" is the CSS class, which will be added to the surrounding containers of the missing images.

The server side part has to extend the container, where the possibly missing images are located.

Sample code

VerticalLayout rootLayout = new VerticalLayout();
rootLayout.setId("container");
// ...
rootLayout.addComponent(image1);
rootLayout.addComponent(image2);
new BrokenImageFix().extend(rootLayout);

Links

• Online Demo
• Issue Tracker
• Source Code

Compatibility