Dash Plotly图片在Jupyter正常显示但浏览器不渲染问题排查

我一眼就看出问题所在了——Jupyter和Dash对本地图片的加载逻辑完全不一样！

在Jupyter Notebook里，代码是直接在你的本地环境运行的，读取logo.png这种相对路径的本地文件毫无压力。但Dash是个Web应用，当你在浏览器访问时，浏览器是从Dash服务器请求资源的，你直接写source="logo.png"，服务器根本不知道这个文件在哪，浏览器自然加载不到图片，就显示空白块了。

下面给你两种靠谱的解决方法，选哪种都行：

方法1：用Dash默认的静态资源目录（推荐） #

Dash有个默认的静态资源目录规则，只要你按要求放文件，它会自动帮你处理资源路径：

• 第一步：在你的Dash项目根目录下，新建一个名为assets的文件夹（名字必须是这个，Dash会自动识别）
• 第二步：把你的logo.png图片移动到这个assets文件夹里
• 第三步：修改Figure里的图片路径，把source="logo.png"改成source="/assets/logo.png"

修改后的图片添加代码片段：

fig.add_layout_image(
 go.layout.Image(
 x=0,
 sizex=img_width * scale_factor,
 y=img_height * scale_factor,
 sizey=img_height * scale_factor,
 xref="x",
 yref="y",
 opacity=1.0,
 layer="below",
 sizing="stretch",
 source="/assets/logo.png")  # 这里修改路径
)

方法2：把图片转成Base64编码嵌入（无需额外文件夹） #

如果你不想新建assets目录，可以把图片转为Base64字符串，直接嵌入到Figure里，这样就不需要依赖外部文件了：
首先导入base64模块，然后读取图片并编码，最后把编码后的字符串作为source值：

import base64

# 读取图片并转为Base64编码
with open("logo.png", "rb") as img_file:
    encoded_img = base64.b64encode(img_file.read()).decode()

# 修改图片的source属性
fig.add_layout_image(
 go.layout.Image(
 x=0,
 sizex=img_width * scale_factor,
 y=img_height * scale_factor,
 sizey=img_height * scale_factor,
 xref="x",
 yref="y",
 opacity=1.0,
 layer="below",
 sizing="stretch",
 source=f"data:image/png;base64,{encoded_img}")  # 使用Base64字符串
)

验证修改后的完整Dash代码 #

这里给你一个完整的可运行示例（以方法1为例）：

import dash
from dash import html, dcc
import plotly.graph_objects as go

app = dash.Dash(__name__)

fig = go.Figure()
# Constants
img_width = 600
img_height = 400
scale_factor = 0.5
# Add invisible scatter trace.
fig.add_trace(
 go.Scatter(
 x=[0, img_width * scale_factor],
 y=[0, img_height * scale_factor],
 mode="markers",
 marker_opacity=0
 )
)
# Configure axes
fig.update_xaxes(
 visible=False,
 range=[0, img_width * scale_factor]
)
fig.update_yaxes(
 visible=False,
 range=[0, img_height * scale_factor],
 scaleanchor="x"
)
# Add image（已修改路径）
fig.add_layout_image(
 go.layout.Image(
 x=0,
 sizex=img_width * scale_factor,
 y=img_height * scale_factor,
 sizey=img_height * scale_factor,
 xref="x",
 yref="y",
 opacity=1.0,
 layer="below",
 sizing="stretch",
 source="/assets/logo.png")
)
# Configure other layout
fig.update_layout(
 width=img_width * scale_factor,
 height=img_height * scale_factor,
 margin={"l": 0, "r": 0, "t": 0, "b": 0},
)

app.layout = html.Div(style={'backgroundColor': 'white'}, children=[
 html.Div(html.H1(children="My Dashboard ")),
 dcc.Graph(figure=fig),
])

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

只要按方法1把图片放到assets目录，或者用方法2转Base64，重新运行Dash应用，浏览器里就能正常显示图片了！

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