如何在 Plotly-Dash (dbc.NavbarSimple) 中将徽标添加为品牌（或品牌名称）？

Question

在以下代码中，我想将图像（徽标）添加为品牌或品牌名称。

def navbar():
navigation_bar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Tab 2", href='/tab2')),
        dbc.NavItem(dbc.NavLink("Tab 3", href="/tab3")),
        dbc.NavItem(dbc.NavLink("Tab 4", href="/tab4")),

    ],
    brand="Home",
    brand_href="/",
    sticky="top",
    color="light",
    dark=False,
    expand='lg', )

return navigation_bar

我想添加带有品牌名称的徽标，如下所示：

Answer 1

你可以这样做：

navbar = dbc.Navbar(
[
    html.A(
        dbc.Row(
            [
                dbc.Col(html.Img(src = logo.png, height= "50px")),
                dbc.Col(dbc.NavbarBrand(
                    html.H1("Title", className = "ml-2"))),
            ]
        )
    ),
    dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
    dbc.Collapse(
        search_bar, id="navbar-collapse", navbar=True, is_open=False
    ),
    dbc.NavbarToggler(id="navbar-toggler2"),
    dbc.Collapse(
        dbc.Nav(
            # right align dropdown menu with ml-auto className
            [dropdown], className="ml-auto", navbar=True
        ),
        id="navbar-collapse2",
        navbar=True,
        ),

],

然后传入app.layout

确保导入：

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import dash