Updating my app so an Image can be shown on the page when I select a certain filter from the dropdown menu

Dash Python
1

Hello, I am new to dash and was wondering if it is possible to have my app serve Images to my webpage from information selected in the dropdown menu.

so far I have a dropdown menu that updates information in a data table when something is selected from the dropdown but I also want to then have an image uploaded to my page that corresponds with the dropdown.

is this possible and how would I go about this with callbacks etc?

Thanks :slight_smile:

2

Hi @Pricey98 and welcome to the Community.

Yes it’s possible.

You have to include an html.Img component in the layout.

html.Img(id = “my_image”, src=app.get_asset_url("image.jpg")

All the image files must be located in the /assets folder when the app starts running.

Then in the callback use the dropdown value as input and the following Output:

Output(“my_image”, “src”),

And return the source with the corresponding image file.

1 Like
3

Thanks @Eduardo! would I have to do this for each different image I want to show for each dropdown value?

4

Yes, you need to have a dictionary with each option of the dropdown and each image file

1 Like
5

Great! Thank you for the help :slight_smile:

1 Like