Directory

← Back

BrokenImageFix

BrokenImageFix

Author

Rating

Popularity

<100

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2016-06-14
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.1+
Browser
N/A

BrokenImageFix - Vaadin Add-on Directory

BrokenImageFix BrokenImageFix - Vaadin Add-on Directory
# 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.
Online