我有以下代码:
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()
[当我在笔记本上执行此操作时,会显示图像。但是,当我在浏览器上尝试时,什么都不会显示。我附上了屏幕截图以供参考。它仅显示一个空块而不是图像。我已附上了参考。为什么?我在浏览器中显示的代码:
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.stack.imgur.com/9EJ9W.png
我解决了。我使用了完全不同的方法
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()))
])