Updating Card Img using Card dropdown

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!!

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([
                    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'),

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

if __name__ == "__main__":

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.

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:

             options=[{'label': 'client10', 'value':'image1'}, {'label': 'client20', 'value':'image2'}],