Django后端对接React前端时图片无法显示仅展示URL路径问题求助

• 问题1：MEDIA资源路由配置顺序错误、非DEBUG模式无路由
  你当前配置中仅DEBUG=True时才加载MEDIA资源路由，且生产环境的通配符路由优先级高于MEDIA路由，导致所有MEDIA请求被拦截返回React入口文件。
  修复方案：
  调整urls.py路由顺序，将MEDIA、静态资源、接口路由放在通配符路由之前，生产环境推荐用Nginx代理MEDIA目录，临时测试可放开DEBUG限制：

# 调整后的urls.py核心配置
urlpatterns = [
    # 优先放置接口、admin等业务路由
    path('admin/', admin.site.urls),
    path('api/', include('你的应用.urls')),
]
# 全局配置MEDIA、静态资源路由
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# 通配符路由放在最后，仅匹配前端路由
if not settings.DEBUG:
    urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]

• 问题2：前端拿到的是相对路径，未匹配后端服务地址
  前后端分离部署时端口不同，返回相对路径会默认请求前端服务地址，导致404。
  修复方案：
  在DRF序列化器中返回图片的完整绝对路径，示例代码如下：

# Product序列化器配置
from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    # 自定义image字段返回完整URL
    image = serializers.SerializerMethodField()
    class Meta:
        model = Product
        fields = ['id', 'name', 'image', 'description', 'price', 'createdAt']
    def get_image(self, obj):
        if obj.image:
            request = self.context.get('request')
            return request.build_absolute_uri(obj.image.url)
        return ''

调用序列化器时传入request上下文：

# 视图中调用序列化器示例
serializer = ProductSerializer(instance=product, context={"request": request})

• 问题3：基础依赖与权限配置缺失

1. 确认已安装ImageField依赖包Pillow，执行命令安装：pip install pillow
2. 确认项目根目录下的media文件夹存在，且运行Django服务的用户有该目录的读写权限。

内容的提问来源于stack exchange，提问作者gifty08