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

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