I want to deploy django to gae and display images

Question

I have an app created with django and deployed with google app engine. Images stored in the static folder are not displayed in the template. But the css file works fine.

I don't understand why the image is not loaded even though the css file is loaded. Is there any solution?

▼version

Django 4.1.1

▼Error

GET https://<myapp>.an.r.appspot.com/static/img/example.png/ 404

▼app.yaml

runtime: python39
instance_class: F1
env: standard
service: default

entrypoint: gunicorn -b :$PORT config.wsgi:application

includes:
 - secrets/secret.yaml

handlers:
 - url: /static
   static_dir: staticfiles/
 - url: .*
   secure: always
   script: auto

▼part of settings.py

from pathlib import Path
import os


BASE_DIR = Path(__file__).resolve().parent.parent

if os.getenv('GAE_APPLICATION', None):
   # production
   DEBUG = False
   ALLOWED_HOSTS = ['myapp.an.r.appspot.com']
else:
   # develop
   DEBUG = True
   ALLOWED_HOSTS = ['*']

   import yaml
   with open(os.path.join(BASE_DIR,'secrets','secret_dev.yaml'), encoding="utf-8") as file:
        objs = yaml.safe_load(file)
        for obj in objs:
            os.environ[obj] = objs[obj]

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    "myapp",
    'django_cleanup.apps.CleanupConfig',
    'django_feather',
    'widget_tweaks',
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "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",
    'myapp.middleware.middleware.AdminProtect',
]

ROOT_URLCONF = "config.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [os.path.join(BASE_DIR, 'templates'),],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
                'myapp.context_processor.notice_content',
            ],
        },
    },
]

WSGI_APPLICATION = "config.wsgi.application"


# Database

if os.getenv('GAE_APPLICATION', None):
    #production
    DATABASES = {
        'default': {
            'ENGINE': 'django_psdb_engine',
            'NAME': os.environ["DB_NAME"],
            'HOST': os.environ['DB_HOST'],
            'PORT': os.environ['DB_PORT'],
            'USER': os.environ['DB_USER'],
            'PASSWORD': os.environ['DB_PASSWORD'],
            'OPTIONS': {'ssl': {'ca': BASE_DIR / 'cacert.pem'}, 'charset': 'utf8mb4'}
        }
    }
else:
    #develop
    DATABASES = {
        'default': {
            'ENGINE': 'django_psdb_engine',
            'NAME': os.environ["DB_NAME"],
            'HOST': os.environ['DB_HOST'],
            'PORT': os.environ['DB_PORT'],
            'USER': os.environ['DB_USER'],
            'PASSWORD': os.environ['DB_PASSWORD'],
            'OPTIONS': {'ssl': {'ca': BASE_DIR / 'cacert.pem'}, 'charset': 'utf8mb4'}
        }
    }

STATIC_URL = "static/"
STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"),
    ]
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

▼top.html

{% extends "base.html" %}
{% load static %}

~~~

<img class="..." src={% static "img/example.png" %}/>

▼folder