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
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": [
"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!
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
