HOW TO: When pressing dataframe cell, show image?

Hi!
So currently I have a dataframe in HTML form. In my dataframe “players”, I have a column called “Player”. And my goal is to when pressing each “players[‘Player’]”, the dataframe closes, and an image shows corresponding to that player. The images are stored in my app directory, and I have a column in my dataframe, called “Path”,with the path to each image. So how do I approach this problem?

columns_to_display = ['Rating', 'Player', 'Position', 'Age', 'Value', 'Wages', 'Contract']
html = players[columns_to_display].to_html(index=False)
html = html.replace('<th>', '<th style="text-align: left;">')
st.write(html, unsafe_allow_html=True)

Thanks in advance!

Hi @pedroalexleite

There’s a supported approach of displaying images directly in a DataFrame via st.dataframe or st.data_editor by using the st.column_config.ImageColumn parameter.

Here’s the Docs page on this with a code snippet example on how to implement this.

Hope this helps!

Hi, thanks for your response!

My goal is not really to display an image in my dataframe. My goal is to have each cell in players[‘Player’], to work like a button. Where after pressing that button an image opens up (outside the dataframe, I also want to close the dataframe when pressing the button).

Is there anyway of making this work, using Streamlit?

Thank you, again!

That sounds similar to the example in this discussion: