Embedding image links in table doesn't show image, saving to HTML does

[robmarkcole]

I am attempting to display a pandas dataframe with a col including images following this tutorial. However the images fail to render in the streamlit app, but a saved html file is fine. Can anyone advise?

import pandas as pd
import streamlit as st


df = pd.DataFrame(
    [
        [2768571, 130655, 1155027, 34713051, 331002277],
        [1448753, 60632, 790040, 3070447, 212558178],
        [654405, 9536, 422931, 19852167, 145934619],
        [605216, 17848, 359891, 8826585, 1379974505],
        [288477, 9860, 178245, 1699369, 32969875],
    ],
    columns=[
        "Total Cases",
        "Total Deaths",
        "Total Recovered",
        "Total Tests",
        "Population",
    ],
)

# Create a list named country to store all the image paths
country = [
    "https://www.countries-ofthe-world.com/flags-normal/flag-of-United-States-of-America.png",
    "https://www.countries-ofthe-world.com/flags-normal/flag-of-Brazil.png",
    "https://www.countries-ofthe-world.com/flags-normal/flag-of-Russia.png",
    "https://www.countries-ofthe-world.com/flags-normal/flag-of-India.png",
    "https://www.countries-ofthe-world.com/flags-normal/flag-of-Peru.png",
]
# Assigning the new list as a new column of the dataframe
df["Country"] = country

# Converting links to html tags
def path_to_image_html(path):
    return '<img src="' + path + '" width="60" >'


st.markdown(
    df.to_html(escape=False, formatters=dict(Country=path_to_image_html)),
    unsafe_allow_html=True,
)

# Saving the dataframe as a webpage - works
df.to_html("webpage.html", escape=False, formatters=dict(Country=path_to_image_html))

Displays:

But the html file:

[randyzwitch]

That’s a strange one @robmarkcole, as inside the Streamlit app it’s giving a 403 error, meaning the countriesoftheworld site sees the message, but refuses to fulfill it.

Can you bring the flags local to your repo?

[robmarkcole]

Same issue with flags local Im afraid. Clicking through:

The url should be instead referencing file:///Users/robin/streamlit/pandas_table/flag-of-United-States-of-America.png ?

[kareemrasheed89]

Has this problem been solved by anyone. I amy want to build something related in the future

[kareemrasheed89]

Has this problem been solved by anyone. I may want to build something related in the future

[alex_myn]

st.write( "Your HTML " ) - this helped me to view the page

[dataprofessor]

Hi @kareemrasheed89,

The above code by @robmarkcole seems to work fine now, which I’ve turned into a demo app and the corresponding GitHub repo. Additionally, I’ve added a Download button for exporting the HTML file.

• Demo app https://dataprofessor-st-demo-image-table-streamlit-app-1x7rnd.streamlitapp.com/
• GitHub repo GitHub - dataprofessor/st-demo-image-table

[kareemrasheed89]

Thanks Chief.

This make sense

[robmarkcole]

Thanks @dataprofessor !

[dataprofessor]

A pleasure @robmarkcole

[kareemrasheed89]

Many thanks for this @dataprofessor

[kareemrasheed89]

@dataprofessor pls how can one easily add pagination to this html table, i read documentation, it was not available.

[robmarkcole]

Just published my slightly modified approach which embeds the images as base64 strings so that the generated html file can be shared with people who do not have access to the files (i.e. they are on a local machine) GitHub - robmarkcole/streamlit-image-table-pandas-app: Place images in a table using pandas and generate a shareable report