Change image via button press

[lawchin]

def change_img(self):
t_a = 'clownfish'

t_a = 'goldfish'
searchA = f'./images/{t_a}.png'
ta_flag = Text(value=searchA)

avsb=Image(
width=100,
height=100,
fit=ImageFit.CONTAIN,
repeat=ImageRepeat.NO_REPEAT,
border_radius=border_radius.all(10),
src=ta_flag.value

can somebody teach me on how to change image via button press. can' t find any tutorial on youtube or google.
when I press the change button based on that code above... nothing happen. I dont know what went wrong.. I have all the image inside the images folder.

is it a bug or I just dont know how to change image via button press the proper way.
can somone guide me please

[mmartinortiz]

Hi @lawchin ,

Formatting your code will help others to run and debug your code. In that way, it is easier to understand what your code does and find what it is wrong.

If you do not know how to format code in Markdown, check out this link

[ndonkoHenri]

@lawchin also please make sure to send a runnable code sample. I mean, some simple code with your issue, which could be directly executed.

This will make us help you better.

[bobwatcherx]

@lawchin also please make sure to send a runnable code sample. I mean, some simple code with your issue, which could be directly executed.

This will make us help you better.

`from flet import *
import shutil
import os
def main(page:Page):

def saveupload(e:FilePickerResultEvent):
	for x in e.files:
		print(x.name)
		print(x.path)
		you_copy = os.path.join(os.getcwd(), 'myupload')
		shutil.copy(x.path, you_copy)
		you_image.src = f"/myupload/{x.name}"
		print(you_image.src)
		page.update()

file_picker = FilePicker(on_result=saveupload)
page.overlay.append(file_picker)

you_image = Image(src=False,width=300,
	height=200
	)
page.theme_mode ="light"
page.add(
Column([
	Text("Dqw12312"),
	ElevatedButton("upload File",
		on_click=lambda e:file_picker.pick_files()
		),
	you_image
])		
	)

flet.app(target=main,upload_dir="myupload")
`
Why doesn't the image source change when I want to upload a file? but source works when src is set statically and doesn't work when dynamic @ndonkoHenri

[lawchin]

I'm so sorry about that. Here are the proper code. now I know how to include the code in here after read from the Markdown link you shared.

after pressing the button the text change.. but unfortunately the img not.

import flet 
from flet import (
    Container,
    Row,
    Column,
    alignment,
    Page,
    Text,
    Image,
    ImageFit,
    ImageRepeat,
    border_radius,
    FilledButton
    )
# both file 'SWK.png' and 'SAB.png' are already inside './images/' folder
ta_flag = Text(value='SWK')
txt = Text(value='Sarawak')

def tukar(self):
    ta_flag.value = 'SAB'
    txt.value = 'Sabah'
    self.page.update()

iview=Column(
    controls=[
        Image(                      
        width=50,
        height=50,
        fit=ImageFit.CONTAIN,
        repeat=ImageRepeat.NO_REPEAT,
        border_radius=border_radius.all(10),        
        src=f'./images/{ta_flag.value}.png'
        ),

        txt,

        FilledButton(
            'Change'
            ,on_click=tukar
        )
    ]
)
def main(page: Page):
    page.title = "Change_image"
    page.add(iview)
flet.app(target=main)

[lawchin]

I finally found the solution to my question..... they placed it under python guide
https://flet.dev/docs/guides/python/animations