[Question] How do you cache images on client-side with a flet web-app?

[p5k369]

Question

Hey there,
I have written an application with flet which at some point has to load a lot of images, like 500 and display them. It takes a while, so far so good. But if the user interacts with the page and something changes all the 500 images have to be loaded again (for example a button gets pressed and now only a specific type of images shall show). There is no real cache like there would be with native html, isn't it?
Also client_storage does not seem to be a good solution because of the browser limitations and because of not beeing able to disable them remotely.
Caching the images on server side is of no use because the bottle neck is the file transfer from server to client.

Have you experienced a problem like that? How did you approach it?

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

In which control are the images?

[p5k369]

The images are in the Image control like that, the first is invisible and does not contain the base64 str, the second is shown at first.

image = Column(
    [
        Image(
            key=item.doc_id,
            src_base64="",
            width=300,
            height=300,
            fit=ImageFit.SCALE_DOWN,
            visible=False,
        ),
        Image(
            src="load.gif",
            width=128,
            height=128,
            fit=ImageFit.SCALE_DOWN,
        ),
    ]
)

Those images are then put into a container which itself is content of a draggable.

Draggable(
    group="elastic",
    content=Container(
        key=item.doc_id,
        data=item,
        url=f"https://path_to_our_server/static/{process_path}",
        url_target=UrlTarget.BLANK,
        on_click=self.on_img_clicked,
        content=Column(
            controls=[
                image,
                Text(
                    item.name,
                    text_align=TextAlign.CENTER,
                    width=300,
                    height=40,
                    # overflow=TextOverflow.ELLIPSIS
                ),
            ],
            horizontal_alignment=CrossAxisAlignment.CENTER,
        ),
    ),
)

After the page has loaded I iterate over the images and start a thread for each image which gets its base64 str via the key (or item.doc_id) from elastic search. After its loaded it is set to visible and the second control is set to invisible (I also tried the progressRing for that, but it is unusable if it needs to be rendered that often). That way the user interface is always accessible and responds to the user input while showing more and more pictures. That works very nice. What I need now is a place to put those pictures so that I can access them after the initial load. client_storage works in principal, but is not really usable due to the browser limitations.
Could the problem be the base64 str? Would an image get cached like in the second control src="load.gif", ?

[ndonkoHenri]

I suggest you use a GridView or a ListView

[p5k369]

That would not solve the problem it's not about performance problems during viewing but about network traffic.
Indeed the problem was the base64 str and the way we provided them directly from elastic search.
To make use of the browsercache we put a fileshare on our server with real images that can be accessed via url. Configured cache control on our webserver. Simultaniously launch all threads to load the images and thats it. After the page has loaded once, it will always load instant even with thousands of pictures.

So in the end it wasn't a flet issue, more of a infrastructure topic. Nevertheless I appreciate your fast response. Thank you.