How do I dynamically render an image using LitRenderer and StreamResource in Vaadin Flow?

Question

I'm trying to create a LitRenderer for dynamically generated images that can be either gif/jpg/png files using a StreamResource in Vaadin. I also have the byte[] and so on but I figure using a StreamResource is the better way to do this. That being said I'm not sure how to display the StreamResource in the LitRenderer code. Below is my code:

private Renderer<CustomImageData> createImageRenderer() {
    return LitRenderer.<CustomImageData>of("""
                            <vaadin-horizontal-layout>
                                <div><img src=\"${item.imageStreamResource}\"/></div>
                            </vaadin-horizontal-layout>""")
            .withProperty("imageStreamResource", CustomImageData::getThumbnailAsStreamResource);
}

Clearer I can't just pass the imageStreamResource as a src as it's not a URL. It manages URL's but it's not a URL. My CustomImageData also has methods like getByteData(), getMimeType(), and so on but as mentioned above using a StreamResource seems like the better implementation.

My question is how edit the code above so that it will display the image for <img>? The only examples I can find including such as this one and this one only seem to show images that are pre-defined, nothing dynamically generated.

And in case this helps the calling code is:

grid.addColumn(createImageRenderer())
        .setKey(THUMBNAIL)
        .setHeader(THUMBNAIL);

What is the frequency of the image? Is this "enum level" or "user upload" level? — cfrick, Aug 10 '22 at 20:24

Leif Åstrand · Accepted Answer · 2022-08-11T07:47:29.727

StreamResource is not a good alternative in combination with LitRenderer. The reason for this is that each StreamResource instance needs to be registered to generate a URL and route requests for that URL to that particular instance. This would cause a memory leak unless carefully managed. With typical usage, the resource is associated with a component instance: when the component is detached, then the StreamResource instance and its corresponding URL are also unregistered.

With LitRenderer, there isn't any directly accessible trigger available for reacting when the resource instance for a given row can be unregistered. This means that you'd have to associate the resource with the entire grid component, which in turn means that if the user scrolls through all of the rows in that grid, then you'd end up with all those StreamResource instances in memory, along with any byte[] or such that they reference.

I would instead recommend that you define your own URL scheme and implement a servlet (or e.g. a Spring RestController) to handle requests to those URLs to on-demand fetch the corresponding data and return it directly in the response. As an alternative, you could also replace your LitRenderer with a ComponentRenderer since that would give something for the StreamResource to be associated with. Yet another way could be to pass the image data as a base64 encoded data URI, as shown in this example.

I ended up goin with a base64 encoder. It was a lot simpler. Most of the images were thumbnails and there weren't too many per grid. If the grid sizes would get significant enough I can see it making sense using servlet for a number of reasons. That being said it just seems that this would be a common use case (render thumbnails in a grid) and that there should be a simple and easy method. In any case thank you for confirming, that's what I thought. — Stephane Grenier, Aug 11 '22 at 19:57
The simple and easy way is probably with `ComponentRenderer`. It might lead to performance issues if the grid has many such columns, but might still be good enough for many cases. — Leif Åstrand, Aug 12 '22 at 09:11

How do I dynamically render an image using LitRenderer and StreamResource in Vaadin Flow?

1 Answers1