What is the recommended way to create a table of Images?

🎈 Using Streamlit
1

Hello,

I have a matrix of images (3 lists, each has 10 images). What is the recommended way to show this?

  • st.image can show a list, but not a matrix.
  • I can use st.write() to output html (e.g. , ,
    ), but is that really the recommended way?

    fyi, I currently have the URLs of the images inside a DataFrame.
    what is your recommendation.
2

I found a solution.
Use dataframe
include HTML in the dataframe
and then print it to the page.

code:

    sel = load_dataframe()

    #format the images list
    sel['html'] = ["<img src='" + r.url
        + f"""' style='display:block;margin-left:auto;margin-right:auto;width:{image_width}px;border:0;'><div style='text-align:center'>""" 
        + "<br>".join(r.caption.split()) + "</div>" 
        for ir, r in sel.iterrows()]
    sel2 = sel[['model', 'html', 'rank']].pivot(index='rank', columns="model", values="html")

    #show the list of images as a dataframe
    st.write(sel2.to_html(escape=False), unsafe_allow_html=True)
2 Likes
3

Can you show a screenshot of what this produces?

4

glad you found a solution but what was wrong with the list feature in st.image? you could’ve merged the lists and give custom length slices to st.image.