Image can display in graph_objects but cannot in Dash

Dash Python
1

I need to display a numpy.ndarray type image in a plotly subplot. It can display the image normally by the code:

fig.add_trace(go.Image(z=img), row=1, col=2)

fig.show()

However, when I want to transfer the plotly figure to Dash by the following code, the image in plotly subplot cannot display normally.

app = dash.Dash()
    app.layout = html.Div([
      dcc.Graph(figure=fig,
                style={
                  'height': '900px',
                  'width': '100%'
                }),
      ],
      style={
        'display': 'inline'
      })

app.run_server(debug=True)

Just wonder why and how to solve this issue.
I have tried the base64 to encode a png, but I want to know how to display ndarray image directly in Dash.

2

hi @NeilS welcome to the community. Can you share a sample image with us so we can test the code locally?

3

I just use an image array converted by OpenCV from a video:

video = cv2.VideoCapture(video_path)
a, frame = video.read()
img = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

The converted img can display in fig.add_trace()

4

It’s solved, the issue is caused by the version of dash installed by anaconda which is 1.19. After updating the dash to 2.3, the issue was solved.

1 Like