🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Background image url directing to external folder

Hi all,
I have a Div with a background image.

I’m updating this image on button clicks (i.e. I can flip through images). So far everything worked fine. However, I’d like to pull images from a folder that’s not part of the directory that the app.py file is in.

I tried the solutions mentioned in other posts using flask.send_from_directory(), however, to no avail. I’m not sure whether this should even work since the background-image attribute only takes a string.

A shortened version of my code looks as follows:

STATIC_PATH = 'C:/mypath/'
    
html.Div(id='container_img', style={'background-image':'url(\'{0}\')'.format(url)})

@app.callback(
    Output('container_img', 'style'),
    [Input('store', 'data')]     #store data changes when button is clicked
)
def next_photo(data):
    path = os.path.normpath(df_imgs.iloc[data[0]]['path'])     #load path to image

    url = STATIC_PATH + os.path.join(*path.split(os.sep)[-3:])    #full paths to files were saved, only taking the last three parts of it and merge it with STATIC_PATH
    new_style = {
                         'background-image':'url(\'{0}\')'.format(url),
                        }
return new_style

@app.server.route(r'/C:/mypath/<resource>')
def serve_static(resource):
    return flask.send_from_directory(STATIC_PATH, resource)

Thanks for any input.

M