Django与React一体化部署后图片无法显示的问题解决求助

我明白你的困扰，这个问题的核心原因是你最后那条re_path('*')兜底路由把所有请求都拦截了，包括静态文件（/static/）和媒体文件（/media/）的请求，导致Django没法正确返回这些资源，而是直接返回了React的index.html。下面给你两个可行的解决方案：

方案一：修改兜底路由的正则表达式，排除静态/媒体路径 #

把你的兜底路由改成下面这样，用正则的负向前瞻排除掉以static或media开头的请求：

re_path(r'^(?!static|media).*', TemplateView.as_view(template_name='index.html')),

这个正则的意思是：只有当路径不是以static或media开头时，才会触发兜底路由返回index.html。这样静态和媒体文件的请求会正常匹配到你配置的static()规则，返回对应的文件。

方案二：调整URL规则的顺序，让静态/媒体规则优先匹配 #

Django的URL匹配是按从上到下的顺序执行的，所以你可以把静态和媒体的URL规则放在兜底路由之前，确保这些请求先被正确处理：

from django.conf import settings
from django.conf.urls.static import static

# 先定义所有API和管理后台的路由
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('djoser.urls')),
    path('api/', include('djoser.urls.jwt')),
    path('api/', include('accounts.urls')),
    path('summernote/',include('django_summernote.urls')),
    path('api/blog/', include('blog.urls')),
]

# 追加静态和媒体文件的路由规则（放在兜底路由前面）
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

# 最后添加兜底路由
urlpatterns += [
    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),
]

额外检查点 #

• React打包路径：确保React项目的package.json里没有设置错误的homepage，建议设置为"homepage": "/"或者直接删除这个配置，这样打包后的静态资源路径会正确指向Django的/static/目录。
• 开发环境DEBUG模式：在开发环境（DEBUG=True）下，static()函数才会生效；如果是生产环境，建议用Nginx等web服务器直接处理静态和媒体文件，不要让Django来处理，这样性能更好也不会有路由冲突问题。
• 静态资源收集：部署前记得执行python manage.py collectstatic，把React打包后的静态文件和Django的静态文件都收集到STATIC_ROOT指定的目录里。

内容的提问来源于stack exchange，提问作者C-Bizz