如何与Streamlit中st.image展示的图片进行鼠标交互？

Streamlit原生的st.image组件本身不支持直接的鼠标点击、移动交互，官方API里确实没有提供这类事件的回调接口——毕竟Streamlit的核心定位是快速搭建数据展示类应用，原生组件大多聚焦在基础展示和表单输入场景。

不过你可以通过以下几种方式实现这类交互需求：

1. 嵌入HTML/JS自定义交互逻辑 #

通过st.components.v1.html将图片包裹在HTML中，用JavaScript监听鼠标事件（click、mousemove等），再把交互数据传回Streamlit的会话状态。示例代码：

import streamlit as st
from streamlit.components.v1 import html

# 自定义HTML+JS，监听图片点击事件
html_content = """
<img id="interactive-img" src="https://example.com/your-image.jpg" style="width: 500px; cursor: pointer;">
<script>
const img = document.getElementById('interactive-img');
img.addEventListener('click', (e) => {
    // 获取相对于图片的点击坐标
    const clickData = { x: e.offsetX, y: e.offsetY };
    // 将数据发送给Streamlit
    window.parent.postMessage({ type: 'IMG_CLICK', data: clickData }, '*');
});
</script>
"""

html(html_content, height=550)

# 初始化会话状态存储点击数据
if 'img_click_data' not in st.session_state:
    st.session_state.img_click_data = None

# 查看点击坐标
if st.button("查看点击坐标"):
    if st.session_state.img_click_data:
        st.write(f"点击位置：X={st.session_state.img_click_data['x']}, Y={st.session_state.img_click_data['y']}")

2. 使用第三方自定义组件 #

社区有不少封装好的Streamlit组件支持图片交互，比如streamlit-cropper（主打图片裁剪，但内置了点击、拖拽交互），安装后直接调用即可：

import streamlit as st
from streamlit_cropper import st_cropper
from PIL import Image

# 加载本地或网络图片
target_img = Image.open("your-local-image.png")

# 渲染带交互的图片组件
cropped_img = st_cropper(
    target_img,
    realtime_update=True,
    box_color='#FF4444',
    aspect_ratio=None
)

st.write("裁剪区域已同步更新")

安装命令：pip install streamlit-cropper

3. 借助画布组件实现交互 #

如果需要更灵活的交互（比如标记、拖拽），可以使用streamlit-drawable-canvas组件，将图片作为画布背景，监听鼠标事件：

import streamlit as st
from streamlit_drawable_canvas import st_canvas
from PIL import Image

# 加载图片
bg_img = Image.open("your-image.jpg")

# 创建带背景图的交互画布
canvas_result = st_canvas(
    background_image=bg_img,
    height=bg_img.height,
    width=bg_img.width,
    drawing_mode="transform",  # 支持点击选择、拖拽元素
    key="interactive_canvas",
)

# 获取交互产生的数据
if canvas_result.json_data is not None:
    st.write("交互数据：")
    st.json(canvas_result.json_data)

安装命令：pip install streamlit-drawable-canvas

内容的提问来源于stack exchange，提问作者Maddy Boy