Display BLOB as Image

Vaadin 6 / 7 / 8 Framework UI
1

Hey guys,

im trying to display my BLOB as an Vaadin Image…
Is there a easy way to get this properly done? I already tried a few methods but it won’t work…

Thanks!

2

There are couple of ways to do this. I assume you are using Vaadin 8.

First you need to base64 encode your image say byte[] value. Something like

String url = "data:"+mimeType+";base64," + Base64.encodeBase64String(value);

Where can be say mimeType = "image/png"

And then you can use the url in Image component.

The above does not work with IE8 for other than icon sized images, with other browsers this inlined base64 image approach works quite well.

3

Thank you Tatu!
I’m working with Vaadin 13…
It is still working this way, but is there a better way in Vaadin 13? To directly set the BLOB to an Image component?

4

You might find this part in the docs about Dynamic Content helpful: https://vaadin.com/docs/v13/flow/advanced/tutorial-dynamic-content.html (note that Image supports StremResource)