Image from byte array

Flow
1

I am trying to find a way to create a Vaadin Flow Image using a byte array. I do not have the image as a file in the project or server, only in the DB.

Is there any way I can do it? Maybe by using a AbstractStreamResource? If so, then can you help me get an AbstractStreamResource from byte please?
If not, then how should I go about this?

2

I just now thought I figured it out using this (rather confusing imo) [documentation]
(https://vaadin.com/docs/v12/flow/advanced/tutorial-dynamic-content.html).

StreamResource resource = new StreamResource("myimage.jpg", () -> new ByteArrayInputStream(myByteArray));

But this results in the images not being displayed properly - it shows the alt text and an imagefile-icon.
The network request url is shown as http://localhost:9080/VAADIN/dynamic/resource/0/1fa73280-cf9f-4818-bd9f-961f0b4134f9/myimage.jpg and has the status code 200. The size of the response is always 334 B, which is not much and tells me that the image is not actually sent/received. What am I doing wrong here?

3

It turns out my error was coming from the byte array being lazy loaded (or rather the pojo containing the image). After I solved that, the images were displayed correctly. Sorry…

Here is the code I used in the end:

FooBar fooBar = fooBarService.findByIdLoadLazyAttributes(id);
byte[] imageBytes = fooBar.getImagePojo().getFile();
StreamResource resource = new StreamResource(fooBar.getName() +".jpg", () -> new ByteArrayInputStream(imageBytes));
Image image = new Image(resource, fooBar.getName());

I do want to say that the documentation mentioned in previous post is really terrible. The topic is “Dynamic Content” and yet nothing there is dynamic. And the only explained use case is for .svg images… Sorry I really didn’t mean to turn this into a rant! Anyway, I hope with my given code here I can help future readers.