Dash交互式Plotly图表中图片无法显示问题求助

问题原因 #

1. 错误赋值覆盖图表对象：fig.add_layout_image()是原地修改图表的方法，返回值为None，你代码中fig = fig.add_layout_image(...)的赋值操作会将有效图表对象覆盖为None，这是潜在致命问题。
2. 图片尺寸与轴范围不匹配：当前图表的x、y轴范围是0到1，但你设置图片sizex=2、sizey=2，导致图片大部分区域超出可见范围，无法正常显示。

修复后的代码 #

import numpy as np
import pandas as pd
import plotly.express as px
import math, json
import dash
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go


GS = 300
fig = go.Figure()

# 添加透明散点层用于捕获点击事件
fig = fig.add_traces(
    px.scatter(
        x=np.repeat(np.linspace(0, 1, GS), GS), y=np.tile(np.linspace(0, 1, GS), GS)
    ).update_traces(marker_color="rgba(0,0,0,0)").data)

# 添加布局图片：移除错误赋值，调整位置参数适配轴范围
fig.add_layout_image(
        dict(
            source="https://images.plot.ly/language-icons/api-home/python-logo.png",
            xref="x",
            yref="y",
            x0=0,
            y0=0,
            x1=1,
            y1=1,
            sizing="stretch",
            opacity=1,
            layer="above")
)

# Build App
app = dash.Dash(__name__)
app.layout = dash.html.Div(
    [dash.dcc.Graph(id="graph", figure=fig), dash.html.Div(id="where")]
)


@app.callback(
    Output("where", "children"),
    Input("graph", "clickData"),
)
def click(clickData):
    if not clickData:
        raise dash.exceptions.PreventUpdate
    return json.dumps({k: clickData["points"][0][k] for k in ["x", "y"]})


if __name__ == '__main__':
    app.run_server(debug=True)

关键修改点 #

• 去掉fig = fig.add_layout_image(...)中的赋值，直接调用fig.add_layout_image()完成图片添加，避免覆盖图表对象。
• 使用x0、x1、y0、y1将图片的显示范围限定在图表的0-1轴范围内，配合sizing="stretch"让图片完全填充图表区域。

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