在 plotly dash 中，如何将本地图像文件来源到 dash.html.Img？

Question

这是将本地图像文件来源到 html 中的 <img> 元素的方法：

<html>
    <h1>This is an image</h1>
    <img src="file:///C:/Users/MyUser/Desktop/Plotly_Dash_logo.png" alt="image"></img>
</html>

这会按预期显示图像。但是当我尝试使用 plotly dash wrapper 元素制作相同的页面时，它不起作用：

import dash
from dash import html, dcc

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('This is an image'),
    html.Img(src=r'file:///C:/Users/MyUser/Desktop/Plotly_Dash_logo.png', alt='image'),
    ])

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=False, use_reloader=False)

本地图片文件不显示。但是如果我用来自互联网的文件替换源代码，比如 'https://rapids.ai/assets/images/Plotly_Dash_logo.png'，它就可以正常工作。

这是怎么回事？

Answer 1

您可以尝试使用这个旧 GitHub 问题中提供的解决方案： https://github.com/plotly/dash/issues/71

它似乎不是为本地 url 构建的:?

Answer 2

经过更多搜索，我发现我可以将我的图像文件放在名为“assets/”的文件夹中，然后相对于应用程序文件夹引用它。

html.Img(src=r'assets/Plotly_Dash_logo.png', alt='image')

我还可以使用应用程序实例的特殊方法 dash.Dash.get_asset_url()。

html.Img(src=app.get_asset_url('my-image.png'))

来源：https://dash.plotly.com/dash-enterprise/static-assets

在 plotly dash 中，如何将本地图像文件来源到 dash.html.Img？

In plotly dash, how do I source a local image file to dash.html.Img?

html

python

image

hyphen

plotly