Cannot display ImageColumns with Streamlit

Summary

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:
    print("herehrehrerer")
    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:
    print("herehrehrerer")
    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

Example

import streamlit as st
import pandas as pd
import base64


def open_image(path: str):
    with open(path, "rb") as p:
        file = p.read()
        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

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.