如何在组合 django-react 应用程序中提供静态文件（如图像）答案

【问题标题】：How to serve static files (like images) in a combined django-react application如何在组合 django-react 应用程序中提供静态文件（如图像）
【发布时间】：2021-12-31 04:42:32
【问题描述】：

这是我通过结合 django 和 reactjs 开发的第一个 web 应用程序，实际上 react 对我来说是新的。请如果我的方法是错误的，我愿意更正。使用纯 django 进行开发时，我发现使用静态和媒体文件没有任何困难。很明显，涉及的元素是媒体根和静态根，分别。在这种情况下，我需要做的就是在 django app中的settings.py如下图：

settings.py

STATIC_ROOT =  os.path.join(BASE_DIR, 'staticfiles')  
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL =  '/media/images/'

urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

但是，当我结合 django 并对配置更改做出反应时，因为 django 已配置在反应中查看index.html 文件，在这种情况下，一个名为STATICFILES DIRS 的附加元素添加到seetings.py文件中，指定反应路径index.html。事实上，我的 django 应用程序当我结合 django 和 react 时，配置看起来像这样：

settings.py

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL =  '/media/images/'

urls.py

urlpatterns = [
    ...
    re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'build')],
    ...
]

当我纯粹用 django 开发时，一切都很好，除了当我结合 django 并在开发中做出反应时 我上传的图像拒绝显示在浏览器上，因为任何与 urlpattern 中的指定路径不匹配的路径都会被重定向做出反应。 re_path(r'^.*', TemplateView.as_view(template_name='index.html')) 所以图像路径正在被重定向。当我单击管理文件中的图像链接时，而不是要显示的图像，我也被重定向以做出反应。我在网上做了研究，但我找不到任何资源这正确解释了如何配置 django 静态根目录和媒体根目录以便能够提供文件（像上传到数据库的图片）内容。 请问，我是否在浏览器上显示图像和媒体？ 在生产中，我想提供静态文件带有 aws s3 存储桶的 django-react 应用程序

【问题讨论】：

标签： python reactjs django amazon-s3 django-rest-framework

【解决方案1】：

检查您是否已将构建文件夹添加到已安装的应用程序中

INSTALLED_APPS = [ build, ]

如果 DEBUG 使用 STATICFILES_DIRS，否则使用 STATIC_ROOT。将此代码添加到 settings.py 文件中。

if DEBUG: STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] else: STATIC_ROOT = os.path.join(BASE_DIR, 'static')

在 urls.py 文件中

urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]

然后运行python manage.py collectstatic

你还应该安装 whitenoise pip install whitenoise

【讨论】：