streamlit Show Images inside dataframes

User story:

I’m using the RDkit python packcage which allows to display molecules. I have them within my dataframe. I can see the molecules within jupyter notebooks withon pandas dataframe, but if I run that dataframe with Streamlit using st.write, all I get is html tags.
Jupyter notebook does this

The data looks like:

img tags within elements. (This is set by 3rd-party libraries, not by Streamlit users.)

Desired behavior:

Display the image

Current behavior:

Prints out the HTML as plaintext.

Questions:

Does this imply we will have to process HTML? Maybe it doesn't. Maybe we just look for img tags, which would absolve us of having to worry about code injection issues.
How will displaying images mess with display of the whole dataframe?

From @treuille : Agreed that we can look for the img tag rather than render arbitrary HTML. We will have to play around with the logic for how to size the image, but we could try to infer the width from the image (and an optional width attribute), while clamping it to a max width.

Aug 14 '20 06:08 nthmost

I recently faced the same issue when dealing with rdkit and streamlit. And just wanted to post a possible workaround that was hanging on the streamlit forums if it would be of help to anyone else.

st.write(df.to_html(escape=False), unsafe_allow_html=True)

Source: https://discuss.streamlit.io/t/what-is-the-recommended-way-to-create-a-table-of-images/1943

Nov 30 '20 11:11 ptigwe

Hi @ptigwe The solution display mol image well. But it does not have many functions such as sorting provided by st.dataframe(df). @nthmost Any way to make st.dataframe(df) display image? Thanks.