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()))
])

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.stack.imgur.com/9EJ9W.png