Displaying dataframe as HTML doesn't render properly

[AyushExel]

Summary

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

[dataprofessor]

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:

st.column_config.ImageColumn - Streamlit Docs

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": [
            "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,
)

Hope this helps!

[AyushExel]

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

[inline-arc]

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

st.image - Streamlit Docs