Django不呈现图像中存在的图像＆＃x27;合并React应用程序后，构建文件夹中的文件夹

Question

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

项目结构

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

cmd cmd line之后/strong>

[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

我解决了问题。我正在回答这个问题，以后是否有人面临同样的问题。

我所做的是在React End的公共文件夹中，我制作了一个称为 static 的文件夹，然后将其放置在 images 文件夹中。然后，我运行了NPM Run Build命令，该命令将 images 文件夹放在静态文件夹中，该文件夹在构建后进行反应。还将React End内部的图像源更改为以下源

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

，这完成了工作