Displaying a logo on Dash navbar on a remote server

Dash Python
1

I am currently facing a problem on a dashboard that I building using Dash.
So I basically have a following code:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.Navbar(
    [
        html.A(
            dbc.Row(
                [
                    dbc.Col(html.Img(src=app.get_asset_url("img/logo.png"), height="30px")),
                    dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            href="https://plot.ly",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
    ],
    color="dark",
    dark=True,
)

When I run this code locally, I can see the logo image on the navbar and everything else is fine. When I run the code on a remote server, and serve the page with gunicorn on a private network, I can see the entire page and the content of the dashboard, except the logo image. Its the exact same code, I just pull from a git repo on the remote server.

When I try to inspect element on the image, it seems to me that I do not have access to the image. How do I fix this? The remote server is Ubuntu 20 LTS.

Thank you!

2

So the problem was that I needed to add

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

to the app declaration. Now it works!

1 Like