Adding image to Dash Multipage

Dash Python
1

@adamschroeder
Hello Adam,
First of all thanks for your support and the fast response on my questions at yout youtube video.
Here a small description of my Problem:
I have a Multipage App with the following folder structure:
project
–app.y
–pages
----page.py
----assets
------background.PNG

I now want to access the background.PNG from my page.py. When I use the pillow library to load the img and get its size it works just finde. But when i then want to use the same path from a dbc.CardImg component i get an error and cannot load the img.

I have created a minimal example of my issue at: GitHub - MoritzFranke/DashMultiPageQuestion: minimal code for path problems at multipage app in dash
I hope you can help me

2

hi @apfelmuse
you misspelled the “asstes” folder in your Github repo. Also, I recommend following this example for adding images to multipage app.

3

Hi adam,
So i should name the background same as the pages name, in this example it would be: “page.PNG” that dash automaticly takes the picture and knows what page its belongs to.
But how do I access this picture then in the CardImg object?
I have tried it but could not figure it out.

4

Hi @apfelmuse

Try putting the assets/ folder in the root directory

- app.py
- assets
   |-- page1.PNG
- pages
   |-- __init__.py
   |-- page1.py
   |-- page2.py

The pages/ plug-in will automatically use the image to create the meta tags for page1.py. You can also access the image in the normal way as described in this post https://community.plotly.com/t/how-to-embed-images-into-a-dash-app/

1 Like