error with img build in method decode bytes – Dash plotly

Question:

I can’t upload a img to my app, when i try i just got a "broken image".

i’m using this piece of code, the only piece of method that i found on plotly forum.

encoded_image = base64.b64encode(open(r'pathimg.png', 'rb').read())
html.Div([
    html.Img(id='image_png', src='data:image/png;base64,{}'.format((encoded_image.decode)))

Inspecting my app page, this error is present

<img id="logo_png" src="data:image/png;base64,<built-in method decode of bytes object at 0x000002B70136AE30>">
Asked By: GLVieira

||

Answers:

You should use decode() function correctly as follows:

import dash
from dash import html
import base64

app = dash.Dash()

image_filename = './child.png'
encoded_image = base64.b64encode(open(image_filename, 'rb').read()).decode()

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

if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)
Answered By: Hamzah
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.