Adding image to Dash Multipage

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:

I now want to access the background.PNG from my 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

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

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.

Hi @apfelmuse

Try putting the assets/ folder in the root directory

- assets
   |-- page1.PNG
- pages

The pages/ plug-in will automatically use the image to create the meta tags for You can also access the image in the normal way as described in this post

1 Like