Reload image with timer

[holmesjason]

I am trying to update an image based on a timer. I have a function called draw_image() that draws an image, saves the image to disk, then returns the file path. The first image is rendered on the site successfully, but when the image is redrawn, nicegui does not render the new image. Only the original image continues to be shown. I have verified that the image being written to disk as triggered by the timer. Any suggestions?

Here is the nicegui code I have written:

    with ui.left_drawer(bottom_corner=True).style(replace='background-color: #eeeeee').props('width=550'):
        ui.add_static_files('/temp_storage', 'temp_storage')
        image = ui.image()
        ui.timer(interval=2.0, callback=lambda: image.set_source(draw_image()))

[falkoschindler]

Is draw_image() returning a different URL every time? If not, the browser does not know that it needs to load a new image. It simply uses the cached image.

In a nutshell - this is what does not work:

ui.button('Update', on_click=lambda: image.set_source('https://picsum.photos/800'))
image = ui.image()

What I tend to do in such a situation is to add some URL parameter that changes every time:

ui.button('Update', on_click=lambda: image.set_source(f'https://picsum.photos/800?t={time.time()}'))
image = ui.image()

This way the URL keeps changing and the browser can't rely on its cache. But you can also use some unique ID for the image filename, i.e. the source returned by draw_image().