Not able to display local image on to dash

Dash Python
1

html.Img(id=‘trend-image’, style={‘width’: ‘100%’, ‘display’: ‘inline-block’, ‘height’: ‘auto’})

@app.callback(Output(‘trend-image’, ‘src’),
[Input(‘trend-image-dropdown’, ‘value’),Input(‘date-picker-single’, ‘date’)])
def display_protocol_trend(trend_image_value,trend_image_date):
trendImagePath = ‘/home/dash/testResults/testruns/alltestruns/{imgDate}/{img}’.format(imgDate=trend_image_date,img=trend_image_value)
encoded_image = base64.b64encode(open(trendImagePath, ‘rb’).read()
trendImage = ‘data:image/png;base64,{}’.format(encoded_image)
return trendImage

This is what i see on my dash:

image

1 Like
2

You should put your image files in the assets folder. Then in your callback you can get the url to the image with app.get_asset_url('path/to/image.png'). The path param is relative to the assets folder.

5 Likes
3

@Philippe Thank you very much.It worked!

4

Hello I’m facing similar problem…can you help out as to how did you solve it?

5

You can make a seperate folder with the name “assets” and then to get the local image “IMAGE.png” which is in that folder to your app by using html.Img(src = app.get_asset_url ('IMAGE.png'). Further you can add any styling you want such as width, height etc.

1 Like
6

I want to display the image inside the div container, it just display it before the div

app.layout = html.Div([
html.Div([

html.Div(html.Img(src=app.get_asset_url('ipsosLogo.png'), style={'height':'2%', 'width':'2%'})),
html.H6('Consumer Confidence Index Dashboard',
        style={
        'textAlign': 'center',
        'color': colors['text']
    }),

],style={
‘float’: ‘top’,
‘border’: ‘1px solid #ccc’,
‘background-color’: ‘#003AA9’,
‘width’: ‘100%’,
‘height’: ‘60px’
}),
please suggest