合并 React 应用程序后，Django 不会渲染构建文件夹内“images”文件夹中的图像

Question

我有一个带有 Django Rest 框架后端的 React 应用程序。我运行了构建命令并合并了反应应用程序。 React 应用程序的公共文件夹内有一个图像文件夹，其中包含我在前端开发期间使用的一些徽标和照片。现在，在运行构建并从 Django 渲染站点后，它无法渲染图像。文件夹 images 存在于 React 提供的构建文件夹中。以下是我的配置和设置。

项目结构

┣ 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

模板设置

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_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'))]

页面加载后的命令行

[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

请建议我该怎么办

Answer 1

我已经解决了这个问题。如果将来有人遇到同样的问题，我正在回答这个问题。

我所做的是在反应端的公共文件夹中创建了一个名为 static 的文件夹，并在其中放置了 images 文件夹。然后我运行 npm run build 命令，将 images 文件夹放入 React 在构建后给出的静态文件夹中。并将反应端内的图像源更改为以下源

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

这完成了工作

Answer 2

对我来说效果很好，谢谢。