如何为Plotly Table的每一行添加图片？求更优实现方案

算力阿峰

2026-8-2

在Plotly表格行中嵌入图片的更优方案

你当前用add_layout_image手动定位图片的方法容易因为表格尺寸、行数变化出现错位问题，更可靠的方式是直接在表格单元格中嵌入HTML <img> 标签，让图片和单元格内容自动对齐，完全适配表格布局。

修改后的示例代码

import plotly.graph_objects as go
import pandas as pd
import base64

data = {'team': {1: 'Sales team 1', 2: 'Sales team 2', 3: 'Sales team 3'},
        'award': {1: '', 2: '', 3: ''},
        'performance': {1: '67.00%', 2: '45.00%', 3: '35.00%'}}

df = pd.DataFrame(data)

# 将图片转为base64格式（也可以直接用本地路径或在线URL）
image_1st = 'medal1st.png'
image_1st_base64 = base64.b64encode(open(image_1st, 'rb').read()).decode()
img_tag = f'<img src="data:image/png;base64,{image_1st_base64}" width="30" height="30">'

# 构造包含图片的award列数据
df['award'] = [img_tag] * len(df)

fig = go.Figure(data=[go.Table(
    columnwidth=[40, 40, 40],
    header=dict(
        values=list(df.columns),
        height=35
    ),
    cells=dict(
        values=[df.team, df.award, df.performance],
        align=['center', 'center', 'center'],
        font=dict(color='black', size=18),
        height=45,
        # 确保HTML内容被正确渲染
        format=['', 'html', '']
    )
)])

fig.show()