Zoom on local static images (Not Working) with dcc.Graph

Dash Python
1

Hello,

I’m currently trying to add a local image to a dcc.Graph so that I can zoom in and analyze the png file but I’m having issues with it…

I followed the last section of this documentation: https://plot.ly/python/images/
It seems like it only works when I add links to the source but not with png files from your local machine. This is what I got so far:

# Create figure
fig = go.Figure()

# Constants
img_width = 1600
img_height = 900
scale_factor = 0.5

# Add invisible scatter trace.
# This trace is added to help the autoresize logic work.
fig.add_trace(
    go.Scatter(
        x=[0, img_width * scale_factor],
        y=[0, img_height * scale_factor],
        mode="markers",
        marker_opacity=0
    )
)

# Configure axes
fig.update_xaxes(
    visible=False,
    range=[0, img_width * scale_factor]
)

fig.update_yaxes(
    visible=False,
    range=[0, img_height * scale_factor],
    # the scaleanchor attribute ensures that the aspect ratio stays constant
    scaleanchor="x"
)

# Add image
fig.add_layout_image(
    dict(
        x=0,
        sizex=img_width * scale_factor,
        y=img_height * scale_factor,
        sizey=img_height * scale_factor,
        xref="x",
        yref="y",
        opacity=1.0,
        layer="below",
        sizing="stretch",
        **source="newplot.png"**)
)

# Configure other layout
fig.update_layout(
    width=img_width * scale_factor,
    height=img_height * scale_factor,
    margin={"l": 0, "r": 0, "t": 0, "b": 0},
)

# Disable the autosize on double click because it adds unwanted margins around the image
# More detail: https://plot.ly/python/configuration-options/
fig.show(config={'doubleClick': 'reset'})

When I execute the code, it only generates a blue image without any error in the console.

P.S: I tried running this code in a jupyter notebook and for some reason it works. I’m really confused as to why this is happening…

Appreciate any help.
Thanks,