BrokenImageFix
BrokenImageFix
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
Compatibility
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
BrokenImageFixIssue Tracker
Source Code