I’ve run into this exact issue before—when you try to use a dynamically generated component (like your img element created after clicking "Load image") as an input in a callback, Dash throws that frustrating "Error Loading Dependencies" because the component doesn’t exist in the initial layout. Here’s how to fix it cleanly using Pattern-Matching Callbacks, which are designed for exactly this kind of dynamic component scenario.

The Root Cause #

Dash validates all callback inputs/outputs on app startup. Since your img component is only created after the first button click, Dash can’t find it during initialization, hence the error. Pattern-Matching lets you define callbacks that target components by a shared "type" instead of a fixed ID, so Dash doesn’t need the component to exist upfront.

Step-by-Step Solution #

1. Update the dynamic image's ID to use a pattern: When generating the img element, use a dictionary-based ID with a type key (this tells Dash it’s a pattern-matching target).
2. Modify the style callback to use pattern-matching inputs: Instead of targeting the specific img ID, use ALL to match any component of the specified type, plus the upload component's input.
3. Use dash.callback_context to determine which trigger fired: This lets you handle both upload events and image click events correctly.

Modified Full Code #

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, ALL
from dash.exceptions import PreventUpdate

app = dash.Dash()
app.config['suppress_callback_exceptions'] = True
image = "tmpimg.png"

app.layout = html.Div([
    html.Div([
        html.Div([
            html.Button('Load image', id='load-button'),
            dcc.Upload(
                id='upload-data',
                children=html.Button('Upload image', id='upload-button')
            )
        ]),
        html.Div([
            html.Div(id='images-div'),
            html.Div(id='classification-div', children=html.H2('Div1')),
            html.Div(id='classification-div2')
        ])
    ])
])

@app.callback(
    Output(component_id='images-div', component_property='children'),
    [Input('load-button','n_clicks')]
)
def update_output_div_img(n_clicks):
    if not n_clicks:
        raise PreventUpdate
    return html.Div([html.Img(
        src=app.get_asset_url(image),
        style={
            'width' : '10%',
            'cursor': 'pointer'
        },
        id={'type': 'clickable-img', 'index': 'main'}  # Pattern-matching ID
    )])

@app.callback(
    Output(component_id='classification-div', component_property='children'),
    [Input({'type': 'clickable-img', 'index': ALL}, 'n_clicks')]
)
def update_output_div1(img_clicks):
    # Check if any image click triggered the callback
    ctx = dash.callback_context
    if not ctx.triggered:
        raise PreventUpdate
    return html.Div([html.H2('Div1')])

@app.callback(Output('classification-div2', 'children'), [Input('upload-data', 'contents')])
def update_output_div2(content):
    if not content:
        raise PreventUpdate
    return html.Div([html.H2('Div2')])

@app.callback(
    Output(component_id='classification-div', component_property='style'),
    [Input({'type': 'clickable-img', 'index': ALL}, 'n_clicks'),
     Input('upload-data', 'contents')]
)
def update_style(img_clicks, upload_content):
    ctx = dash.callback_context
    if not ctx.triggered:
        # Initial state: show Div1 if no upload, else hide
        return {'display':'inline'} if not upload_content else {'display':'none'}
    
    trigger_id = ctx.triggered[0]['prop_id'].split('.')[0]
    
    if 'upload-data' in trigger_id:
        # Upload happened: hide Div1
        return {'display':'none'}
    else:
        # Image was clicked: show Div1
        return {'display':'inline'}

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

Key Changes Explained #

• Pattern-Matching ID: The img uses {'type': 'clickable-img', 'index': 'main'} instead of a fixed string ID. This lets Dash recognize it as part of a group of components the callback targets.
• Callback Context: dash.callback_context tells us which component triggered the callback, so we can decide whether to show or hide Div1 based on whether it was an upload or an image click.
• PreventUpdate: We use this to avoid unnecessary updates when no relevant action has been taken (like on initial page load).

Alternative Approach: Using a Hidden Intermediate Component #

If you prefer not to use pattern-matching, you can add a hidden dcc.Store component to the initial layout to track the image click state. When the image is clicked, update the store's value, then use the store as input in your style callback. This works because the store exists from the start, so Dash doesn’t throw a dependency error.

Either way, the core idea is to avoid using dynamically generated components directly as callback inputs—instead, use a mechanism that Dash can validate on startup.

内容的提问来源于stack exchange，提问作者Atirag