Configure an image column in st.dataframe or st.data_editor.
The cell values need to be one of:
- A URL to fetch the image from. This can also be a relative URL of an image deployed via static file serving. Note that you can NOT use an arbitrary local image if it is not available through a public URL.
- A data URL containing an SVG XML like data:image/svg+xml;utf8,<svg xmlns=...</svg>.
- A data URL containing a Base64 encoded image like data:image/png;base64,iVBO....
Image columns are not editable at the moment. This command needs to be used in the column_config parameter of st.dataframe or st.data_editor.
| Function signature[source] | |
|---|---|
st.column_config.ImageColumn(label=None, *, width=None, help=None) | |
| Parameters | |
label (str or None) | The label shown at the top of the column. If None (default), the column name is used. |
width ("small", "medium", "large", or None) | The display width of the column. Can be one of "small", "medium", or "large". If None (default), the column will be sized to fit the cell contents. |
help (str or None) | An optional tooltip that gets displayed when hovering over the column label. |
Examples
import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
{
"apps": [
"https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
"https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
"https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
"https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
],
}
)
st.data_editor(
data_df,
column_config={
"apps": st.column_config.ImageColumn(
"Preview Image", help="Streamlit app preview screenshots"
)
},
hide_index=True,
)
Still have questions?
Our forums are full of helpful information and Streamlit experts.