Django not rendering the images present in the 'images' folder inside the build folder after merging the react app

Question

I have a React App with a Django rest framework backend. I ran the build command and merged the react app. The react app had an images folder inside the public folder that had some logos and photos that I used during the frontend development. Now after running the build and rendering the site from Django it is unable to render the images. The folder images is present inside the build folder that react gives. Below are my configurations and settings.

project structure

┣ build
 ┃ ┣ images
 ┃ ┃ ┣ footer-logo.svg
 ┃ ┃ ┣ hero_illustration_student_register.svg
 ┃ ┃ ┣ logo_favicon.svg
 ┃ ┃ ┣ logo_name_header.svg
 ┃ ┃ ┣ only-logo.svg
 ┃ ┃ ┣ quote-left-solid.svg
 ┃ ┃ ┣ quote-right-solid.svg
 ┃ ┃ ┣ service_student_teacher.svg
 ┃ ┃ ┣ student.svg
 ┃ ┃ ┗ Teacher.svg
 ┃ ┣ static
 ┃ ┃ ┣ css
 ┃ ┃ ┃ ┣ main.701fe633.css
 ┃ ┃ ┃ ┗ main.701fe633.css.map
 ┃ ┃ ┗ js
 ┃ ┃ ┃ ┣ main.492ffbea.js
 ┃ ┃ ┃ ┣ main.492ffbea.js.LICENSE.txt
 ┃ ┃ ┃ ┗ main.492ffbea.js.map
 ┃ ┣ asset-manifest.json
 ┃ ┣ index.html
 ┃ ┣ manifest.json
 ┃ ┗ robots.txt
 ┣ schoolies
 ┃ ┣ __pycache__
 ┃ ┃ ┣ settings.cpython-39.pyc
 ┃ ┃ ┣ urls.cpython-39.pyc
 ┃ ┃ ┣ wsgi.cpython-39.pyc
 ┃ ┃ ┗ __init__.cpython-39.pyc
 ┃ ┣ asgi.py
 ┃ ┣ settings.py
 ┃ ┣ urls.py
 ┃ ┣ wsgi.py
 ┃ ┗ __init__.py

template settings

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'build'),
            ],
        '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',
            ],
        },
    },
]

static and media files settings

STATIC_URL = '/static/'

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

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

MEDIA_URL = '/media/'

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

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include("account.urls")),
    path('teacher/', include("teacher.urls")),
    path('search/', include("search.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)


# This is will cath the routes in the frontend and 404 errors
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]

cmd lines after the page loads

[25/Apr/2022 17:00:27] "GET /static/css/main.701fe633.css.map HTTP/1.1" 200 38691
[25/Apr/2022 17:00:27] "GET /static/js/main.82ff440d.js.map HTTP/1.1" 200 2170125
[25/Apr/2022 17:00:27] "GET /images/hero_illustration_student_register.svg HTTP/1.1" 200 833
[25/Apr/2022 17:00:27] "GET /images/logo_name_header.svg HTTP/1.1" 200 833
[25/Apr/2022 17:00:27] "GET /images/footer-logo.svg HTTP/1.1" 200 833
[25/Apr/2022 17:00:27] "GET /manifest.json HTTP/1.1" 200 833
[25/Apr/2022 17:00:27] "GET /logo_favicon.svg HTTP/1.1" 200 833

Please suggest to me what should I do

Answer 1

I have solved the problem. I am answering this question if in future somebody faces the same problem.

What I did is in the public folder in the react end I made a folder called the static and inside that I put the images folder. Then I ran the npm run build command which put the images folder in the static folder that react gives after build. And also changed the the image source inside the react end to the below source

<img src="/static/images/picture.jpg" />

And this did the job