Unable to refresh Image.src

[csgoh]

My application requires to generate images on the fly and the output is display on a Image Control. However, everytime my image is generated, calling Image.src = does not refresh the image. The Image control is still showing the first image.

Code example to reproduce the issue:

import flet as ft
from flet import Theme, Icon
import logging
import os
from PIL import Image
from processpiper.text2diagram import render


logging.getLogger("flet_core").setLevel(logging.ERROR)


def main(page: ft.page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.title = "Process Piper"
    page.scroll = ft.ScrollMode.ADAPTIVE
    page.window_height = 800
    page.window_width = 1200
    page.update()

    def generate_diagram(e):
        diagram_text = user_input.value

        try:
            output_image_file = "diagram.png"
            generated_code, generated_image = render(diagram_text, output_image_file)

            output_image.src = output_image_file
            output_image.update()
            page.update()

        except Exception as e:
            log_text.value = log_text.value + "\n" + str(e)
            page.update()

    test_text = """
    title: Make pizza process
    lane: Pizza Shop
        (start) as start
        [Put the pizza in the oven] as put_pizza_in_oven
        [Check to see if pizza is done] as check_pizza_done
        <Done baking?> as done_baking
        [Take the pizza out of the oven] as take_pizza_out_of_oven
        (end) as end

    start->put_pizza_in_oven->check_pizza_done->done_baking
    done_baking-"Yes"->take_pizza_out_of_oven->end
    done_baking-"No"->put_pizza_in_oven
    """

    user_input = ft.TextField(
        label="Enter text here",
        value=test_text,
        multiline=True,
        text_size=11,
        icon=ft.icons.TEXT_FIELDS_SHARP,
    )
    generate_button = ft.ElevatedButton(
        "Generate", on_click=generate_diagram, icon=ft.icons.DIRECTIONS_RUN
    )
    output_image = ft.Image("Output Image")

    log_text = ft.TextField(
        label="Log Messages",
        value="",
        multiline=True,
        read_only=True,
        text_size=11,
        color="black",
        bgcolor="white",
    )

    page.add(
        user_input,
        generate_button,
        output_image,
        log_text,
    )


ft.app(target=main)

The render() method regenerates the image based on the diagram_text. However, the output_image.src has no effect when called subsequent times.

To reproduce the bug,

• Install processpiper package, i.e. pip install processpiper
• run the code,
• click on Generate button to get the first diagram generated and displayed on the screen.
• change the test_text by replacing done_baking-"Yes"->take_pizza_out_of_oven->end to done_baking-"Yippie!"->take_pizza_out_of_oven->end
• click on Generate button again to regenerate the diagram.
• You should see that the image displayed on the screen does not reflect to what you have changed. If you see the diagram.png file on the folder, it shows the correct image, but the app is still showing the previous image.

I expect the output_image get updated and showing the latest image.

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

Name: flet
Version: 0.5.2
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: c:\lab\processpiper-gui\venv\lib\site-packages
Requires: flet-core, httpx, oauthlib, packaging, watchdog, websocket-client, websockets
Required-by:

Operating system: Windows

Additional environment details:

[ndonkoHenri]

That seems strange.
Can you try output_img.update()?

If it still doesn't work, then build up some small working code sample with the issue, so we/I can give it a better look.

[csgoh]

Same result even if I use output_img.update()

[ndonkoHenri]

If it still doesn't work, then build up some small working code sample with the issue, so we/I can give it a better look.

[csgoh]

@ndonkoHenri, I have provided a complete code sample that reproduce the issue. See the original post above. Thanks!

[FeodorFitsner]

@csgoh by changing image file contents you are not changing Flet control properties. output_image.src and other image properties stay the same as a result page.update() does nothing.

Solution: every time you generate new image change its filename too.

[csgoh]

Yeah, the works but that is not what I am expecting the package to work. The widget should reload the file content and refresh the output regardless of the file name.

[KentaNakayama]

I support csgoh, We cannot assume a user always posts the different pictures with different names.
For example, if a user uploaded “2025/01/04/dog.png” and then he realized that “2025/01/08/dog.png” is better, and tried to upload. Usually, the system only cares about the filename not the whole directory name, the system takes “dog.png” only and submits to the system and UI needs to update that to show a new picture is uploaded. Changing name is not really an option here since “dog.png” is “dog.png”.(assuming that the user wanted to replace the picture not to add the picture because last picture sucks)
Yes I can just give temp name to update but it just messes the source code. People putting “qux,quux,quuux” on a picture's name only to update once for all is not really functional.