Issue
This is how to source a local image file to the <img>
element in html:
<html>
<h1>This is an image</h1>
<img src="file:///C:/Users/MyUser/Desktop/Plotly_Dash_logo.png" alt="image"></img>
</html>
This displays the image as expected. But when I try to make the same page using the plotly dash wrapper elements, it does not work:
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)
The local image file does not display. But if I replace the source with a file from the internet, like 'https://rapids.ai/assets/images/Plotly_Dash_logo.png'
, it works just fine.
What is going on here?
Solution
After some more searching, I found that I could place my image file in a folder named "assets/", then reference it relative to the app folder.
html.Img(src=r'assets/Plotly_Dash_logo.png', alt='image')
I could also use a special method of the app instance dash.Dash.get_asset_url()
.
html.Img(src=app.get_asset_url('my-image.png'))
Source: https://dash.plotly.com/dash-enterprise/static-assets
Answered By - Wilson
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.