如何在组合django-react应用程序中提供静态文件(如图像)

Question

--这是我结合django和reactjs开发的第一个web应用程序，事实上，reactjs对我来说是新的。请如果我的方法是错误的，我是开放的纠正。在使用纯django进行开发时，我发现使用静态和媒体文件并不困难。显然，所涉及的元素分别是媒体根和静态根。在这种情况下，我所需要做的就是在django应用程序的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被配置为查看react中的index.html文件，在这种情况下，将向seetings.py文件中添加一个名为STATICFILES DIRS的额外元素，以指定用于响应index.html的路径。事实上，当我组合django并作出反应时，我的django应用程序配置如下：

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并在开发中做出反应时，我上传的图像拒绝显示在浏览器上，因为任何与中指定路径不匹配的路径都会被重定向以作出反应。 re_path(r'^.*', TemplateView.as_view(template_name='index.html'))因此图像路径被重定向。当我单击管理文件中的图像链接，而不是要显示的图像时，我也会被重定向以作出反应。我已经在网上进行了研究，但我找不到任何资源来正确解释如何配置django静态根和媒体根，以便能够为文件(如上传到数据库的图像)提供内容。请，我在浏览器上显示图片和媒体吗？在生产中，我想使用s3桶提供django react应用程序的静态文件。

Answer 1

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

INSTALLED_APPS = [ build, ]

如果调试使用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