Image works fine locally but not on Heroku

Dash Python
1

Hey Guys,

Images aren’t working in my app when deployed to Heroku while everything works fine locally. As an example I made a simple app to display an image:

app = dash.Dash()
server = app.server

app.layout = html.Div(
    dbc.Card([
        html.P("test"),
        dbc.CardImg(src=app.get_asset_url('placeholder.jpg'))
    ])
)

Locally it works as intended:

works
works543×710 18.4 KB

But on Heroku it does not:
fails
fails541×504 11.2 KB

I’ve put the assets folder and its contents in GIT so that can’t be the reason the Assets folder is not being found by Heroku. Also note that there are 8 images in my Assets folder even though one only is shown under Resources. (smart loading?)

Anyone has an idea what I could be doing wrong?

2

It seems that using static images is not supported by Heroku. Instead I chose to store my images on AWS S3. It’s working as intended now.

3

Hi @martijn, I’m glad that you found a solution. However, static images should be supported on Heroku. Is the assets folder at the root of your git repository? It should be, otherwise you have to change the static_folder attribute of dash.Dash. Also, did you try with a simple html.Img instead of dbc.CardImg?

4

Hi @Emmanuelle,

Yes, the assets folder is located in the root directory of the repository. I also tried using the relative path ‘assets/placeholder.jpg’.

I have not tried to use a simple html.Img since I would like to use the Card. The next time I need static images I will give that a shot. Thanks!

5

Hi Emmanuelle,

i am also facing the same issue, on heroku my images are not showing, if you have solution could you please post it. i also tried to upload images in google drive and made them shareable but that also not worked.

Thanks
Deepan

6

Odd…I’m using static images in Heroku (.png though…not .jpg but that shoudn’t matter) w/o issues. Could it be that you don’t have a leading / in your relative path? What errors do your Heroku logs show?

Here is a snippet of code from one of my layout files:

import dash_bootstrap_components as dbc

...

children=[
                    dbc.CardImg(
                        src=CUSTOMER['PNGFile'],
                        style={
                            'height': '30%',
                            'width': '30%',
                            'padding': '5px 10px 0px 10px',
                            'position': 'relative'
                        },
                    ),

where, CUSTOMER['PNGFile'] is defined as

CUSTOMER = {
    ...
    'PNGFile': '/assets/custom-logo.png',
    ...
}

Hope this helps!

7

Hi flyinggcujo,

I tried to implement the same but did’nt work.

here is my code:

icon1 = {
‘Slide1’: ‘/assets/Slide1.png’,
}

html.Td(dcc.Link(html.Img(src=icon1[‘Slide1’]), href=’/GetInfo’)),

if there is anything, else i can do then please tell me.

Thanks !!

8

I am also trying, to read and write data on excel , i can read data but not able to write data on heroku on local its working fine any idea?

9

When I ran into a similar problem, I discovered that Heroku web processes are limited to 30 seconds…so if your excel-write callback takes longer, it won’t complete - thus appearing that it’s not working - albeit returning files 0 KB in size. Not saying this is your problem, but it could be …

10

Well, it is not returning as 0 Kb but as it was in earlier state.
means it has some data and showing the same.

But in other app same sheet is writing some data and it is not taking 30 sec .
as possibility to fix.

Thanks!!

11

Hi @Emmanuelle! I’m having the same problem but with an app deployed with a Docker container on Azure. I have my assets folder in the root directory, and it works perfectly fine when I run it locally. The snippet in my code is:

html.A(
        html.Img(
            src=app.get_asset_url("logo.png"),
            style={"float": "right", "padding-right": "15px"},
            id="logo",
        ),
        href="https://www.example.com",
        target="_blank",
    )

Do you have any clue what it may be going wrong?

12

Hi @martijn! I finally found my error, and it seems from your code that it’s the same one.

The first line it’s supposed to be app = dash.Dash(__name__) and not just app = dash.Dash().

It’s explained here: Assets folder not found in docker?

13

@Raudcu Thanks, this fixed the problem!