PNG image not showing

Dash Python
1

Hi,
I cannot figure out, why my local image is not showing in my app. My code is as follows, which is pretty similar to one option recommended. Can anyone help me here?

app = dash.Dash(__name__)#, external_stylesheets=external_stylesheets)


radar_logo = '/home/ammo/Projects/radar-explorer/test.png'
encode_logo = base64.b64encode(open(radar_logo, 'rb').read())


app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(encode_logo))
])

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

If you use Dev tools to inspect the source code (right click -> inspect element, or press f12) you will notice something wrong about your base64 encoding:

<img src="data:image/png;base64,b'...'">

It includes the Python indicator that this is binary and not a real string, you can see more details here: https://stackoverflow.com/questions/8908287/why-do-i-need-b-to-encode-a-python-string-with-base64

This code works fine for me:

import dash
import base64
import dash_html_components as html

app = dash.Dash(__name__)


test_png = 'test.png'
test_base64 = base64.b64encode(open(test_png, 'rb').read()).decode('ascii')


app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(test_base64)),
    ])

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

You should serve your image using the assets instead.

/assets/
  logo.png
app.py

html.Img(src=app.get_asset_url('logo.png'))
4 Likes
4

Hi Philippe
Do we have to create assets folder in windows based notebook server and store file there?

Regards
Rasool

5

Thanks a lot @Damian, this code works perfectly

1 Like
6

I have been stuck for so long. Thank you for this!