在Taipy中创建友好的图片选择器：如何展示带文本的图片链接列表

Taipy完全支持你要的功能，下面是针对Selector、Toggle、Table三种组件的具体实现示例，都能在友好UI中展示带图片的选项并支持单选：

1. 使用Selector组件（下拉/展开式选择） #

通过自定义选项的Markdown内容，让Selector同时展示图片和文本，选中后可直接获取对应数据：

import taipy.gui as tp

# 你的图片数据列表
image_options = [
    {"text": "风景图1", "img_url": "https://example.com/img1.jpg"},
    {"text": "风景图2", "img_url": "https://example.com/img2.jpg"},
    {"text": "风景图3", "img_url": "https://example.com/img3.jpg"}
]

selected_option = None

# 页面定义
page = """
# 图片选择器
<|{selected_option}|selector|lov={[{"label": f"![{opt['text']}]({opt['img_url']})  {opt['text']}", "value": opt} for opt in image_options]}|label=选择图片|width=500px|>

<|已选择：{selected_option['text'] if selected_option else '未选择任何图片'}|>
"""

tp.run(page)

这个方案中，Selector的每个选项会渲染图片+文本的组合，选中后selected_option会直接拿到对应的字典数据，方便后续处理。

2. 使用Toggle组件（横向/纵向单选按钮） #

将Toggle设置为单选模式，自定义每个选项的内容实现图片+文本展示，适合选项数量不多的场景：

import taipy.gui as tp

image_options = [
    {"text": "风景图1", "img_url": "https://example.com/img1.jpg"},
    {"text": "风景图2", "img_url": "https://example.com/img2.jpg"},
    {"text": "风景图3", "img_url": "https://example.com/img3.jpg"}
]

selected_option = None

page = """
# 图片单选面板
<|{selected_option}|toggle|lov={[{"label": f"![{opt['text']}]({opt['img_url']})<br>{opt['text']}", "value": opt} for opt in image_options]}|mode=single|orientation=horizontal|>

<|选中图片：{selected_option['text'] if selected_option else '无'}|>
"""

tp.run(page)

设置mode=single开启单选，orientation=horizontal让选项横向排列，<br>实现图片和文本换行展示。

3. 使用Table组件（表格式选择） #

在Table中自定义列渲染逻辑，将图片链接转为图片展示，同时开启单选模式，适合数据量较多的场景：

import taipy.gui as tp

image_options = [
    {"text": "风景图1", "img_url": "https://example.com/img1.jpg"},
    {"text": "风景图2", "img_url": "https://example.com/img2.jpg"},
    {"text": "风景图3", "img_url": "https://example.com/img3.jpg"}
]

selected_option = None

page = """
# 图片选择表格
<|{image_options}|table|columns=[
    {'name': 'img_url', 'label': '预览图', 'render': lambda val: f"![预览]({val})"},
    {'name': 'text', 'label': '图片描述'}
]|selected={selected_option}|selection_mode=single|height=300px|>

<|选中项描述：{selected_option['text'] if selected_option else '未选择'}|>
"""

tp.run(page)

通过render函数将img_url列渲染为图片，selection_mode=single开启单选，点击表格行即可选中对应数据。

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