Displaying dataframe as HTML doesn't render properly


I’m trying to render a dataframe as html table as I want to render images. Using st.dataframe isn’t a good solution my use case as it as img size hardcoded to a smaller value.
here’s how I’m doing it:

    def transform_to_table(df):
        fn = lambda x: f'<img src="data:image/png;base64,{base64.b64encode(x[1]).decode()}" >' if isinstance(x[1], bytes) else "<img src='data:image/png;base64' />"
        st_table = df.to_html(escape=False, formatters=dict(img=fn))

        return st.markdown(st_table, unsafe_allow_html=True)

Expected behavior:
This should render the table with tight bound by default. I was following the example here and I expected something similar - GitHub - robmarkcole/streamlit-image-table-pandas-app: Place images in a table using pandas and generate a shareable report

Actual behavior:
But I’m getting weird empty spaces in the img cell like this

I also inpected the element and it shows that the img size itself is not large and it doesn’t contain whitespaces.

How can this be fixed? Thanks!

Requirements file

  • Link to your GitHub repo: It’s a private project

Hi @AyushExel

You can look into using st.column_config.ImageColumn in order to add images to your DataFrame.

The Docs page provides an example code snippet that you can use:

The code snippet from the above mentioned Docs page is as follows:

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
        "apps": [

        "apps": st.column_config.ImageColumn(
            "Preview Image", help="Streamlit app preview screenshots"

Hope this helps!

Can I increase the size of the images displayed in the dataframe? By default it’s hardcoded to a very small value

yes you can at some extend by using

st.image(image, width=400px)

as per your requirement aslo you can use clamp to
which adjust the pixel value
for more refer this docs