Plotly Dash - Image does not displayed?

Question

I'm learning Ploty Dash and tried basic Multiple Output Callback. I tried to retrieve images depended to combination of (Number Wheels and Colors). The radio button is OK and work fine, but image does not show up. It just displayed "ripped image icon" and square white blank.

My images stored in.jpg format at my C computer (path as shown in code below). I tried to copy the code from file attached from this course, but still wont displayed that image.

Since this is my first week learn python, I cannot do anything but asking aroung lol. Thanks for help.

  app = dash.Dash()
    

def encode_image(image_file):
    encoded = base64.b64encode(open(image_file, 'rb').read())
    return 'data:image/png;base64,{}'.format(encoded.decode())


app.layout = html.Div([
            dcc.RadioItems(id='wheels',
                options=[{'label': i,'value':i} for i in df['wheels'].unique()],
                           value=1
                          ),
            html.Div(id='wheels-output'),
    
            html.Hr(),
    
            dcc.RadioItems(id='colors',
                 options=[{'label': i,'value':i} for i in df['color'].unique()],
                           value='blue'),
            html.Div(id='colors-output'),
            
            html.Img(id='display-image', src='children', height=300)
      
], style={'fontFamily':'helvetica','fontsize':18})

@app.callback(Output('wheels-output','children'),
             [Input('wheels','value')])

def callback_a(wheels_value):
    return "You Chose {}".format(wheels_value)

@app.callback(Output('colors-output','children'),
             [Input('colors','value')])

def callback_b(colors_value):
    return "You Chose {}".format(colors_value)

@app.callback(Output('display-image','src'),
             [Input('wheels','value'),
             Input('colors','value')])

def callback_image(wheel, color):
    path = '/Python/Udemy-Plotly/Data/Images/'
    return encode_image(path+df[(df['wheels']==wheel) &  
                                (df['color']==color)]['image'].value[0])

Answer 1

Try modify bellow line

'data:image/png;base64,{}'.format(encoded.decode())

to

'data:image/jpg;base64,{}'.format(encoded.decode())

Answer 2

I provided the full path name.

path = '/Users/sathya/PythonClass/Data_Analysis_with_Python/Data_Visualization/Dash/Image/'   

Also Changed

'data:image/png;base64,{}'.format(encoded.decode()) 

to

'data:image/jpg;base64,{}'.format(encoded.decode())