Updating Card Img using Card dropdown

Dash Python
1

Hi all,

I was hoping someone could help answer a problem I am having. I am new to using Dash and am trying to create a callback that will allow me to update the image in a card by the dropdown menu in that same card. Is this possible and if so, how can I go about it?

Thank you!!

2

Hi Rebecca (@Rkennedy )
:wave: Welcome to the Dash community.

A callback can be used to technically update any component property. The dbc.CardImg() has an id and a src property that can be updated. Therefore, you should be able to update card images. Just make sure your images are in the assets folder. For example:

from dash import Dash, html, dcc, callback, Output, Input
import dash_bootstrap_components as dbc

app = Dash(__name__, use_pages=False, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Card(
        [
            dbc.CardBody(
                [
                    html.H4("The Perfect Card Title", className="card-title"),
                    dbc.CardImg(id='card-image', src='/assets/image1.jpg', title="image by NameOfAuthor"),
                    html.H6("Card text goes here:", className="card-text"),
                    dcc.Dropdown(id='image-chosen', options=['image1','image2','image3'], value='image1'),
                ]
            ),
        ],
    )
])

@callback(
    Output('card-image', 'src'),
    Input('image-chosen', 'value')
)
def udpate_image(value):
    return f'/assets/{value}.jpg'

if __name__ == "__main__":
    app.run_server(debug=True)
3

Thank you very much!
Will it still work if I have the dropdown as a list of clients so that when I select a client the image associated with that client will appear in the card? I.e Client 1 selected, Picture of Client appears, Client 2 selected, Picture of Client 2 appears.

4

sure, you just got to figure out how to associate the client name with the image. For that, you can use labels and values in the dropdown. For example:

dcc.Dropdown(id='image-chosen', 
             options=[{'label': 'client10', 'value':'image1'}, {'label': 'client20', 'value':'image2'}], 
             value='image1'),