Html.img Images not rendering in Dash App

Dash Python
1

I am trying to dynamically change images by using callbacks. Below are the snippets of my code;

Function to get the Image:

def get_and_display_player_image(df, player_name):
    df['player_face_url']= df['player_face_url'].str.strip('')
    df['player_face_url']= df['player_face_url'].map(lambda x: x.rstrip('\nName'))
    image_url = df.query('long_name == @player_name')['player_face_url'].values[0]
    print(image_url)
    image = ImageOps.expand(Image.open(requests.get(image_url, stream=True).raw),border=5,fill='black')
    display(image)

**Html.IMG component:**
html.Img(id="player_image1", style={'display': 'block', 'height': 300, 'width': 300,
                                                             'border': '0.5rem solid black', 
                                                             'position': 'relative', 
                                                             'margin': 'auto'})
                                                    

**the callback :** 
 @app.callback(
[Output('player_image1', component_property='src')],
[Input('player1','value')]
)
def update_player_image(player_choice):
    image_src = get_and_display_player_image(df1, player_choice)
    if image_src is None:
        raise PreventUpdate
    else:
        return image_src

my terminal is showing that the image has been generated successfully:
image

But it is not rendering in my Dashboard

Help will be very appreciated.
Thank you in advance

2

hi @Arsalan107
:wave: Welcome to the community.

We recommend you put your code in pre-formatted text. The image below shows how to do it.

image
image1035×352 15 KB

There is a good post on incorporating images into an app, written by a long-time community member. Hopefully, this helps.

3

You are really close! You don’t need to do anything other than pass the url to the image source.

Should be something like this

html.Img(src = 'https://cdn.sofifa.net/players/158/023/22_120.png')
4

Hi, I have been trying the url logic for a while(Sample code attached)

html.Img(id="player_image1", src = 'https://cdn.sofifa.net/players/158/023/22_120.png',
                                                     style={'display': 'block', 'height': 300, 'width': 300,
                                                             'border': '0.5rem solid black', 'position': 'relative', 
                                                             'margin': 'auto'}),


@app.callback(
    
    [Output('player_image1', 'src')],
    [Input('player1','value')]
    
)
def update_player_image(player_choice):
    image_src1 = get_url(df, player_choice)
    if image_src1 is None:
        raise PreventUpdate
    else:
        return image_src1

but I keep getting this error :

Expected type: (<class ‘tuple’>, <class ‘list’>)
Received value of type <class ‘str’>:
‘https://cdn.sofifa.net/players/158/023/22_120.png’

I am very new to this so trying to get a hang of it all

5

What is the function get_url? Is it the same as get_and_display_player_image? If so, I don’t see a return.

6

This is the get_url function

def get_url(df, player_name):
    df['player_face_url']= df['player_face_url'].str.strip('')
    df['player_face_url']= df['player_face_url'].map(lambda x: x.rstrip('\nName'))
    image_url = df.query('long_name == @player_name')['player_face_url'].values[0]
    return image_url
7

I have managed to make it work, hopefully others like me might benefit from this:
Earlier my callback looked like this

@app.callback(
    
    [Output('player_image1', 'src')],
    [Input('player1','value')]
    
)

What I did was to remove the square brackets around my Output and Input in the Callback and now my callback looks like:

@app.callback(
    
    Output('player_image1', 'src'),
    Input('player1','value')
)

and now the app works fine

8

That was going to be my next suggestion. Gald you worked it out!

9

Thanks for your help :grin: