IronImage
Vaadin 10 component to integrate <iron-image>
IronImage
Vaadin 10 Java integration of https://github.com/PolymerElements/iron-image
Usage
Flow only
Adding an iron image as a component.
Component container = ...;
IronImage image = new IronImage("http://.../example.jpg");
// setting some basic properties
image.setSizing(IronImage.Sizing.COVER);
// ...
// styling
image.addClassName("example-image");
// image.setWidth("100px");
// activate preloading
image.setPlaceholder("http://.../small-placeholder.jpg");
image.activatePreload();
container.add(image);
Polymer + Flow
Using the image in a Polymer template.
<link rel="import" href="bower_components/iron-image/iron-image.html">
...
<iron-image id="example-image" class="example-image"
src="http://.../example.jpg" sizing="cover"
preload placeholder="http://.../small-placeholder.jpg" />
and attaching it to Flow
@Route("...")
public class View ... {
@Id("example-image")
private IronImage image;
@PostConstruct
private void init() {
...
// inform us, if the image source could not be loaded
image.addErrorChangedListener(event -> System.out.println(event.isError() ? "error at loading image" : "everything is fine"));
...
}
}
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
- support for Vaadin 10.0.3
- Released
- 2018-08-13
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 10
- Browser
- N/A
IronImage - Vaadin Add-on Directory
Vaadin 10 component to integrate# IronImage
Vaadin 10 Java integration of https://github.com/PolymerElements/iron-image
## Usage
### Flow only
Adding an iron image as a component.
```
Component container = ...;
IronImage image = new IronImage("http://.../example.jpg");
// setting some basic properties
image.setSizing(IronImage.Sizing.COVER);
// ...
// styling
image.addClassName("example-image");
// image.setWidth("100px");
// activate preloading
image.setPlaceholder("http://.../small-placeholder.jpg");
image.activatePreload();
container.add(image);
```
### Polymer + Flow
Using the image in a Polymer template.
```
...
```
and attaching it to Flow
```
@Route("...")
public class View ... {
@Id("example-image")
private IronImage image;
@PostConstruct
private void init() {
...
// inform us, if the image source could not be loaded
image.addErrorChangedListener(event -> System.out.println(event.isError() ? "error at loading image" : "everything is fine"));
...
}
}
```