CODEWITHSUNDEEP
htmlpython-3.xflaskdashboardplotly-dash
Sri Test
Sri Test

Reputation: 387

Dash plotly image doesn't render in browser but displays in jupyter note book python

I have the following code:

fig = go.Figure()

# Constants
img_width = 600
img_height = 400
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(
    go.layout.Image(
        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="logo.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},
)
fig.show()

when I do this on notebook,the image is displayed.but when I try on browser,nothing is displayed.I attach the screenshot for reference.It just displays an empty block instead of image.I have attached the app layout code for reference.Any idea why? My code for display on browser:

app.layout = html.Div(style={'backgroundColor': 'white'},
children=[

    #Title
    html.Div(html.H1(children="My Dashboard "))

    #Generate Dash table

    ,dcc.Graph(figure=fig),



                    ])
```[![Screenshot][1]][1]


  [1]: https://i.sstatic.net/9EJ9W.png

Upvotes: 1

Views: 2860

Answers (1)

Sri Test
Sri Test

Reputation: 387

I solved it.I used a completely different approach

image_filename = 'unilogo.png'
encoded_image = base64.b64encode(open(image_filename, 'rb').read())
app.layout = html.Div([
html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
])

Upvotes: 3

Related Questions