Plotly Dash 点击按钮切换图片时dcc.Card属性错误如何解决？

1 报错修复 #

你遇到的报错核心原因是Card、Container、Row、Col、FormGroup这类UI组件不属于dash_core_components库，而是dash-bootstrap_components组件库提供的能力，修复步骤如下：

• 安装依赖包：执行命令pip install dash-bootstrap-components
• 修改代码的导入和组件调用逻辑：
  • 头部新增导入import dash_bootstrap_components as dbc
  • 初始化应用时指定bootstrap样式：app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
  • 把所有dcc.Card、dcc.FormGroup、dcc.Container、dcc.Row、dcc.Col替换为dbc.Card、dbc.FormGroup、dbc.Container、dbc.Row、dbc.Col

2 切换本地图片的完整实现代码 #

如果你的需求是点击按钮切换本地四张图片，可直接使用修改后的代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# 新增导入bootstrap组件
import dash_bootstrap_components as dbc

# 应用初始化，引入bootstrap样式
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# 控制面板
controls = dbc.Card(
    [dbc.FormGroup(
        [
            dbc.Label("选择图片"),
            dcc.RadioItems(id="select_image",
                           options=[{'label': '不展示', 'value': 'Nope'},
                                    {'label': '图片1', 'value': 'image_1'},
                                    {'label': '图片2', 'value': 'image_2'},
                                    {'label': '图片3', 'value': 'image_3'},
                                    {'label': '图片4', 'value': 'image_4'}
                                    ],
                           value='Nope',
                           labelStyle={'display': 'inline-block', 'width': '10em', 'line-height': '0.5em'}
                           )
        ],
    ),
        dbc.FormGroup(
            [dbc.Label(""), ]
        ),
    ],
    body=True,
    style={'font-size': 'large'})

app.layout = dbc.Container(
    [
        html.H1("图片切换功能"),
        html.Hr(),
        dbc.Row([
            dbc.Col([controls], xs=4),
            dbc.Col([
                dbc.Row([
                    # 替换原来的Graph为Img组件，用于展示本地图片
                    dbc.Col(html.Img(id="show_image", style={"max-width": "100%", "height": "auto"})),
                ])
            ]),
        ]),
        html.Br(),
    ],
    fluid=True,
)


@app.callback(
    Output("show_image", "src"),
    [Input("select_image", "value"),
     ],
)
def update_image(image_name):
    # 未选择时返回空
    if image_name == 'Nope':
        return ""
    # 对应选择返回本地图片路径，本地运行时会自动读取同目录下的图片文件
    return f"{image_name}.png"
    # 如果你的图片是jpg格式，把后缀改成.jpg即可


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

注意：请确保本地目录下的图片后缀和代码中写的后缀一致，如果是jpg格式修改回调里的后缀即可。

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