在巧妙的破折号中，我如何将本地图像文件源到dash.html.Img？
在巧妙的破折号中，我如何将本地图像文件源到dash.html.Img？
提问于 2022-05-20 19:18:44
这是如何将本地图像文件源到html中的<img>元素：
<html>
<h1>This is an image</h1>
<img src="file:///C:/Users/MyUser/Desktop/Plotly_Dash_logo.png" alt="image"></img>
</html>这将像预期的那样显示图像。但是，当我试图使用巧妙的破折号包装元素创建相同的页面时，它不起作用：
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' )来替换源代码，它就可以正常工作了。
这里发生什么事情？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-05-23 15:24:29
经过进一步的搜索，我发现我可以将我的图像文件放在一个名为"assets/“的文件夹中，然后相对于app文件夹引用它。
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'))Stack Overflow用户
发布于 2022-07-20 09:04:14
我用了另一种方式：
contents
- encode
- 打开图像文件并通过base64读取数据并解码it
- ，在字符串前面添加“/ jpg；base64 64”(将jpg替换为png格式图像)
- 将字符串设置为src
。
with open(imgfile, "rb") as image_file:
img_data = base64.b64encode(image_file.read())
img_data = img_data.decode()
img_data = "{}{}".format("data:image/jpg;base64, ", img_data)
# ...
html.Img(id="tag_id", src=img_data, alt="my image", width="200", height="400",
className="img_class")Stack Overflow用户
发布于 2022-05-20 19:36:01
您可以尝试使用这个旧的GitHub问题中提供的解决方案：https://github.com/plotly/dash/issues/71
它似乎不是为本地urls构建的:？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72323871
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号