wagtail + s3 + Heroku でウェブアプリ開発をすると画像アップロードでinternal error 500が出る。

Question

こちらの質問は以下の質問の延長部分にあたります。
元の質問
またStackOverflowでもマルチポストしています。(21/08/19)
マルチポスト先

###症状
画像をアップロードするとInternal server error 500が表示され、読み込まれなくなった。
また、ログにもエラーらしきものは見られない。

###開発環境

Django==3.2.6
gunicorn==20.1.0
psycopg2==2.9.1
wagtail==2.14
DB == postgres
server == Heroku stack-18

###コード

#base.py (開発・本番環境共通の設定部分にあたります。)

*以上、省略*

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')
AWS_S3_CUSTOM_DOMAIN = f'｛ AWS_STORAGE_BUCKET_NAME ｝.s3.amazonaws.com'
AWS_URL = os.environ.get('AWS_URL')

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

STATIC_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/static/'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_DIR = os.path.join(BASE_DIR, 'static'), '/Lib/site-packages/wagtail/admin/static/wagtailadmin'

MEDIA_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/images/'
DEFAULT_FILE_STORAGE = 'storages.backends.MediaStorage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
AWS_LOCATION = 'static'
AWS_DEFAULT_ACL = None

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

django_heroku.settings(locals())

#backends.py

from storages.backends.s3boto3 import S3Boto3Storage
from django.conf import settings

class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATIONS

class MediaStorage(S3Boto3Storage):
    location = 'images'
    file_overwrite = False

以上二点が、重要と思われるコードです。
"images"となっている部分はもともと"media"としていたのですが、いくらそれでデプロイしてもmediaファイルなるものは生成されず、すでにあるimagesを指定しました。

###herokuのログ

2021-08-19T07:26:13.512552+00:00 heroku[router]: at=info method=GET path="/admin/images/" host=DOMAIN request_id=db429860-ee9c-46cb-8c1d-a0276e6a871c fwd="134.180.192.60" dyno=web.1 connect=0ms service=218ms status=200 bytes=19658 protocol=https
2021-08-19T07:26:16.873790+00:00 app[web.1]: 10.13.167.33 - - [19/Aug/2021:07:26:16 +0000] "GET /admin/images/multiple/add/ HTTP/1.1" 200 20418 "https://DOMAIN/admin/images/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.73"
2021-08-19T07:26:16.875044+00:00 heroku[router]: at=info method=GET path="/admin/images/multiple/add/" host=DOMAIN request_id=d294a92c-ba2a-4419-a623-5bc726e68a33 fwd="134.180.192.60" dyno=web.1 connect=1ms service=114ms status=200 bytes=20971 protocol=https
2021-08-19T07:26:24.390868+00:00 app[web.1]: 10.13.167.33 - - [19/Aug/2021:07:26:24 +0000] "POST /admin/images/multiple/add/ HTTP/1.1" 500 363 "https://DOMAIN/admin/images/multiple/add/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.73"
2021-08-19T07:26:24.391146+00:00 heroku[router]: at=info method=POST path="/admin/images/multiple/add/" host=DOMAIN request_id=95e79995-3973-4aae-9584-9ad3432a1d41 fwd="134.180.192.60" dyno=web.1 connect=0ms service=3610ms status=500 bytes=636 protocol=https

以上のコードにより先述の質問のcss問題は全て解決されました。
しかし、画像読み込みだけがいまだうまくいきません。みなさまのお力をお貸しいただけないでしょうか？

Answer 1

以下のサイトを参考に再度１からAWS設定とコーディングをしました。

https://medium.com/@kjmczk/s3-heroku-django-faf559c3a401

コードは以下の通りです。

STATICFILES_DIRS = [
    os.path.join(PROJECT_DIR, 'static'),
]


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

WAGTAIL_SITE_NAME = "XXXX"

from XXXX.aws.conf import *


django_heroku.settings(locals())

課題：ローカル環境で動かすと、画像は透過されてしまいました。デプロイを行うことでその問題は解決いたしました。またブラウザによっては反映されたされていないがあるみたいです。原因究明急ぎます。