Why Amazon S3 not serve images on my Django blog?

Question

I have a blog app wrote in Django and deployed with Heroku. Now I want to keep the images that the users upload with the blog post and I have a default image if the user don't want a specific picture. When I used whitenoise the pictures were there, but after a logout, login they were disappeared and the default were there only.

I tried set up an s3 storage to keep all the images, but now all images are gone.

I don't know if I should delete whitenoise from middlewares.

DEBUG = False

ALLOWED_HOSTS = ['www.moviefanblog.hu', 'moviefanblog.hu', 'moviefanblog.herokuapp.com', 'localhost',  '127.0.0.1']
CSRF_TRUSTED_ORIGINS = ['www.moviefanblog.hu', 'moviefanblog.hu', 'moviefanblog.herokuapp.com', 'localhost',  '127.0.0.1']

#Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'articles',
    'accounts',
    'storages',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'blog.urls'

I changed the media and the statics url too to the s3 bucket.

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# STATIC_URL = '/static/'

AWS_ACCESS_KEY_ID = '...'
AWS_SECRET_ACCESS_KEY = '...'
AWS_STORAGE_BUCKET_NAME = 'moviefanblog-storage'
AWS_S3_REGION_NAME = 'eu-north-1'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400',}
AWS_DEFAULT_ACL = 'public-read'

AWS_LOCATION = 'statics'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'statics'),
    )

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'

#MEDIA_URL = '/media/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

# STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
django_heroku.settings(locals())

Here is the source of the page, the files are in the s3 storage theoreticaly

<h1>Article list</h1>
    <div class="articles_list">
        
        <div class="article_list">
            <a href="/articles/ember/">
            <h2>ember</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/Glass_QCWvwHE.jpg"/></p>
            <p>emnerere</p></a>
            <p>robi, Aug. 29, 2023, 8:52 p.m.</p>
        </div>
        
        <div class="article_list">
            <a href="/articles/dd/">
            <h2>dd</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/A_Star_Is_Born_20dml8w.jpg"/></p>
            <p>ddd</p></a>
            <p>robi, Aug. 29, 2023, 8:37 p.m.</p>
        </div>
        
        <div class="article_list">
            <a href="/articles/teszt2/">
            <h2>teszt2</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/default-movie_9V4xYKD.png"/></p>
            <p>teszt2</p></a>
            <p>robi, Aug. 29, 2023, 5:22 p.m.</p>
        </div>
        
        <div class="article_list">
            <a href="/articles/teszt3/">
            <h2>teszt3</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/The_Bodyguard.jpg"/></p>
            <p>sdfsdf</p></a>
            <p>robi, Aug. 29, 2023, 5:19 p.m.</p>
        </div>
        
        <div class="article_list">
            <a href="/articles/ddsfasdf/">
            <h2>ddsfasdf</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/default-movie.jpg"/></p>
            <p>dsadf</p></a>
            <p>robi, Aug. 29, 2023, 4:55 p.m.</p>
        </div>
        
        <div class="article_list">
            <a href="/articles/teszt/">
            <h2>teszt</h2>
            <p><img src="https://moviefanblog-storage.s3.amazonaws.com/statics/A_Star_Is_Born_V45N6Og.jpg"/></p>
            <p>teszt</p></a>
            <p>robi, Aug. 29, 2023, 4:54 p.m.</p>
        </div>
        
    </div>

But when I click one of the images link, I got an access denied:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>84E3HT1Y2WHAY0PW</RequestId>
<HostId>shYQPWYTaOjbUUH8f83sc6tIMjlRnxNuI5wz04O/vgZ0X3pXBN6GNgx/ByOYTD+F5Ucjq75TPx8=</HostId>
</Error>

I have a favicon, a css and a javascript in the statics and they are working, so I think the setting of the s3 storage is ok and the problem is image format specific.

When I execute collectstatic, it said that it uploaded the files to tmp. Is it ok?

Here is my s3 bucket:

I tried to manually upload my static folder, but did not serve the images.

Here is the statics folder:

All the movie banners in the movies folder(I prepared some for testing purposes). I tried to create a new article and upload a banner, but not shown in the statics folder, so I guess it not worked.

Here is the page, that needs to be display the images:

And one more thing, maybe it will help: When I try to edit an article, the uploaded image name has a unique address. The original image name was Glass.jpg, but when I uploaded it has the _QCW... And did not shown in the statics in s3 storage.

This is a project for my thesis, so I would appreciate it if someone could help me. Thank you in advance.