Cannot display ImageColumns with Streamlit


I’m building an application that needs to display a large dataset as an interactive table. I was considering using steamlit’s dataframe API with ImageColumn config. But it’s not working.
The images in my pyarrow table are as bytes. Now, I saw in the docs that it only accepts base64 string to I’m converting the column to base64 using:

if df.get("img") is not None:
    df["img"] = df["img"].apply(lambda x: base64.b64encode(x))

But its still not displaying any images.

Steps to reproduce

I’m converting bytes img column to base64

if df.get("img") is not None:
    df["img"] = df["img"].apply(lambda x: base64.b64encode(x).decode('utf-8'))

st.dataframe(data=df, use_container_width=True, column_config={
    "img": st.column_config.ImageColumn( "Preview Image", help="Streamlit app preview screenshots")

The resultant base64 string looks something like this - b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xdb\x00C\x00\x02\x01\x01\x01\x01\x01\x02\x01\x01\x01\x02\x02\x02\x02\x02'
The same byte images can be displayed easily using st.Image(), so I wonder by its not supported directly in dataframes. Either is fine for me - displaying byte images directly or converting them to base64. Currently neither works
The requirement to build a visualiser and I receive the table in that format (imgs as bytes)

Hello. You have to convert the column to a decoded base64 string with the right format.

Format needs to be:

data:image/png;base64, decoded_base64_string


import streamlit as st
import pandas as pd
import base64

def open_image(path: str):
    with open(path, "rb") as p:
        file =
        return f"data:image/png;base64,{base64.b64encode(file).decode()}"

df = pd.DataFrame([["logo", "resources/bug-sno-blue.png"]], columns=["title", "file"])

df["image"] = df.apply(lambda x: open_image(x["file"]), axis=1)
st.dataframe(df, column_config={"image": st.column_config.ImageColumn()})

Hope this works!

1 Like