Search code examples
pythonimageplotly-dash

Dash app not displaying JPG images on browser

I have images in a folder called images. I want to display those in Dash app on the browser.

Here is the code I used:

    import dash
    from dash import Dash, html
    import os

    asst_path = os.path.join(os.getcwd(), "images")
    app= Dash(__name__, assets_folder=asst_path)
    print(f"{asst_path}/img1.jpg")
    app.layout = html.Div([
        html.Img(src=app.get_asset_url(f"http://{asst_path}/img1.jpg")),
        html.Img(src=app.get_asset_url(f"{asst_path}/img2.jpg"))
    ])

   if __name__ == '__main__':
        app.run_server(debug=True)

But the images are not displayed. enter image description here

The link here states that I need to serve the resources via http as well : by default, Dash automatically serves all of the files that are included in the assets folder in the root of your app directory but I am not sure what it is that I am doing wrong. Thanks for help

Solution

  • Dash automatically serves all files in the assets folder. So in-app.get_asset_url(), you only need to pass the file name, not the full path or URL. Here's the corrected code:

    import dash
from dash import Dash, html
import os

asst_path = os.path.join(os.getcwd(), "images")
app= Dash(__name__, assets_folder=asst_path)

# Correct usage of app.get_asset_url()
# Replace with your image filename
image_filename = 'Figure_1.png'  
image_src = app.get_asset_url(image_filename)

app.layout = html.Div([
    html.Img(src=image_src),
])

if __name__ == '__main__':
    app.run_server(debug=True)