I have a multi page app which in the root view has a sidebar. The sidebar has different icons which are placed in the /assets folder. The app structure is similar to this:
DashApp/
- app.py
- pages /
– home.py
– page1.py
– page2.py - assets/
–icon.png
In app.py I initialize the layout as:
def layout():
return html.Div(
[
dcc.Location(id="url", refresh=True),
sidebar,
html.Div(dash.page_container, className='page-layout', id="page-content")
],
id="main-layout",
className="body")
And I init dash from flask with this function:
def init_dash(server):
from flask.helpers import get_root_path
dash_app = Dash(server=server,
routes_pathname_prefix="/dashapp/",
use_pages=True,
assets_folder="DashApp/assets",
pages_folder="DashApp/pages",
external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])
dash_app.layout = mainLayout()
return dash_app.server, dash_app
Icons:
html.Img(src="assets/home.svg", className="sidebar-icon"),
When loading home.py, the sidebar correctly loads the icons. On the sidebar, there is a dbc.NavLink which loads page1. Then, inside page1 also the sidebar icons load correctly. So far, so good.
Now, page 2 is accessed with a variable in the path which loads the corresponding information. This page is also accessed through a NavLink. When the page is loaded (NavLinks don’t reload the page by default). Now, while in page 2 if I refresh the page (F5) the images won’t load (broken img icon will show).
page1 and home are defined as:
dash.register_page(__name__, path='/', title='Home')
dash.register_page(__name__, path='/page1', title='Page 1')
page 2 is defined as:
dash.register_page(
__name__, path_template='/results/page2/<job_name>', name='Page 2 Results')
My Dash app is running inside a flask server with login, so I can see in the console the following:
When loading home and page1, the assets arre accessed correctly with: “GET /dashapp/assets/home.svg HTTP/1.1”
When loading page2, the assets are not found because the assets path changed: “GET /dashapp/results/page2/assets/home.svg HTTP/1.1”
This only happens in pages accessed with path variables (maybe because of the /results/page2 structure?). Do anyone know a workaround or the correct way to handle this? Thanks.