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')
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')
Hi @ethanyan
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!
Charly
Thanks, I can get a new page, but the link is wrong.
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?
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