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

user_13721819 0
Viewed 1187

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?

plotly image html python
3 Answers

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

user_137218190

I used another way:

  • open the image file and read the contents
  • encode the data by base64 and decode it
  • add "data:image/jpg;base64, " in front of the string (replace jpg with png for png format images)
  • set string as 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")
user_195857060
user_130329780
Related