Whitenoise doesn't seem to help images to show up in heroku

I got the 404 error to images.

https://example.herokuapp.com/images/IMG_2060.JPG 404 (Not Found)

This is my tree of directory.

directory1
    |
    |-- manage.py
    |
    |-- build/
    |     |
    |     |--static/
    |     .
    |     .
    |
    |-- static/
    .     |
    .     |--images/
    .     .
    .     .

The images that I want to see are in directory1/static/images/.

settings.py

INSTALLED_APPS = [
    'whitenoise.runserver_nostatic',
     ...
]

MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ....
]


STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_URL = '/images/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

whitenoise version is 5.2.0. I deployed this app to Heroku. Everything works fine except images. Did I miss something?

Thank you in advance! :)

Django's static file handling can be a bit confusing.

STATIC_ROOT is supposed to be an empty directory which Django copies your static files to ready for serving. This is done by the collectstatic command which is run automatically by Heroku.

Directories you want it to copy files from should be listed in STATICFILES_DIRS.

So if you change your settings like this it should work:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
    os.path.join(BASE_DIR, 'static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')