PNG image not showing

Dash Python
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