How to zoom st.image

🎈 Using Streamlit
1

I used st.image() to open a image in my page, but this picture needs to be enlarged after clicking.
is there any method to do it?

layout = Image.open('..\\layout.png')
st.image(legend,width=200,caption='legend')
2

Hi @ethanyan :wave:

Thanks for your question!

Currently, Streamlit does not have a built-in feature to enlarge an image when clicked.

But you can achieve this functionality by using a workaround that involves creating an HTML hyperlink around the image and using the st.markdown function to display the image.

When the image is clicked, it will open in a new browser tab at its original size.

Here’s an example of how you can do this:

import streamlit as st

# Define the path to the image
image_path = '..\\layout.png'

# Define the HTML hyperlink with the image
html_string = f'<a href="{image_path}" target="_blank"><img src="{image_path}" width="200" caption="legend"></a>'

# Display the image using `st.markdown`
st.markdown(html_string, unsafe_allow_html=True)

Please note that this solution opens the image in a new browser tab, which is the closest behavior to enlarging the image when clicked.

I hope that this workaround will be helpful. Please let us know how it goes.

Happy Streamlit-ing! :balloon:

Charly

1 Like
3

Thanks, I can get a new page, but the link is wrong.
image

I can get the image with the following code but not in html_string
layout = Image.open('.\layout.png')
Is there something wrong with how I’m using it?

4

Thanks @ethanyan

Did you try forward slashes (/) instead of backslashes ()?

Thanks,
Charly

5

If you want to access this, you’ll have to turn on Static File Serving Static file serving - Streamlit Docs, and put the image in the static/ folder, and reference it with the link app/static/layout.png

You can test it out by just going to <your_app_url>/app/static/layout.png and see if it works