Search code examples
djangoherokustaticdjango-staticfileswhitenoise

Receive Server Error 500 on Heroku with Django for specific pages with images (static served by WhiteNoise)

For the last couple of hours I've been searching through Stack Overflow for a fix, but most posts about the Server Error 500 could not provide a fix for me. Django can't find static images and returns a 500. The images are in static/css/images.

for example, I try to get https://monkeyparliament.herokuapp.com/about/. Logs return:

2019-02-10T17:09:33.362724+00:00 app[web.1]: ValueError: Missing staticfiles manifest entry for 'css\images\donate.png'
2019-02-10T17:09:33.363611+00:00 app[web.1]: 10.31.121.50 - - [10/Feb/2019:17:09:33 +0000] "GET /about/ HTTP/1.1" 500 27 "https://monkeyparliament.herokuapp.com/music/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36"

But when I https://monkeyparliament.herokuapp.com/music/, it seems it can find css/js/fonts in the static folder. Feel free to inspect the page source.

My static images are served by WhiteNoise (http://whitenoise.evans.io/en/stable/). As you can see above, WhiteNoise is in the requirements. MIDDLEWARE in settings.py has 'whitenoise.middleware.WhiteNoiseMiddleware' added below django.middleware.security.SecurityMiddleware'.

Why are my images not found?

Procfile

web: gunicorn websitemp.wsgi:application --log-file -

Requirements.txt

dj-database-url==0.5.0
Django==2.0.10
gunicorn==19.9.0
psycopg2==2.7.7
pytz==2018.9
whitenoise==4.1.2

Structure

website is the app, websitemp is the project

enter image description here

Project on Github

if you want to see the full structure you can find all files on the github: https://github.com/DennisVerstappen/websitempdjango

Thanks in advance!

Solution

  • Thank you for thinking along. After trying your solutions I noticed that the slashes in

    {% static 'css\images\donate.png' %}

    differed from the slashed in other Python files in the logs. Changing the backslashes to forwardslashes fixed my problem. The folder system notation that I used (Windows) differed from the one Heroku uses. Using the notation below worked.

    {% static 'css/images/donate.png' %}