st.column_config.ImageColumn

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,
)
Built with Streamlit 🎈
Previous: Link columnNext: Area chart column
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.