Hi! I didn’t find a way to do this with existing components so I created a simple component to display images and receive the index of the last image that was clicked on. [screenshot] A more advanced example can be seen live here . Installation pip install st-clickable-images Quickstart import st…

Hello @vivien This is a very cool component! Much needed! Is there a way currently to show the title of the image above the image as well? (Currently the title shows while hovering the mouse over the image?). Thank you!

Hi @MLbyML . Thanks. I’m afraid this isn’t possible with the component as it is now (but it shouldn’t be too complicated to do it if you want to give it a try: the javascript code to display and style the images is pretty short).

@vivien thanks so much for sharing this, a fabulous widget which came in very handy for me today - using it to select an image when then calls an Azure image analysis service to return a description plus lists of categories, tags, landmarks, people, and brands. Love it!

@LostGoatOnHill Thanks for the feedback. It sounds like a cool app!

[image] @vivien you helped make this possible :slight_smile:

Hi vivien, good day can you pls provide an exact example of this, where the image file is locally found. I am having trouble doing it. Thanks.

Hi @data.science . Here is an example: import base64 import streamlit as st from st_clickable_images import clickable_images images = [] for file in ["image1.jpeg", "image2.jpeg"]: with open(file, "rb") as image: encoded = base64.b64encode(image.read()).decode() images.append(f"…

Hi @vivien thanks for the component, I like it. I am struggling to change the state of it though. I need a functionality which allows to state goes back to default (-1). Say I have an image which I use for saving report. I have a few more radio and dropdown lists to adjust the report page. Every tim…

Hi @Omer_Eker . I’d first invite you to switch to st-click-detector which is more flexible and general than st-clickable-images. More specifically regarding the situation you describe, it might be possible to use st.session_state to keep track of the last component with which the user interacted to …

Custom component to display clickable images

Custom Components

vivien March 21, 2022, 7:47pm 12

FYI, I created another component which is a generalization of this one: st-click-detector. It works not only on images but also on all HTML links.

Topic		Replies	Views
New tiny component: streamlit-image-coordinates Custom Components	19	8493	August 13, 2024
Click event image Using Streamlit	2	6876	February 14, 2022
Register click events (on images) Using Streamlit	3	5629	February 11, 2020
Interactive image display Custom Components	2	4358	December 1, 2022
🖼️ streamlit-image-select: An image select component for Streamlit Custom Components	15	12714	November 18, 2024

Custom component to display clickable images

Related topics