Django+React(Vite)项目中图片无法渲染的问题求助

问题分析 #

前端遍历博客文章时文字内容正常显示，但图片路径错误：http://localhost:5173/media/xxx（前端域名），而图片实际存储在Django后端的media目录，正确路径应为http://localhost:8000/media/xxx。核心原因是DRF默认返回图片的相对路径，前端直接使用时会自动拼接当前页面的域名。

解决步骤 #

1. 配置Django Media服务 #

首先在项目settings.py中设置Media路径：

# settings.py
import os

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

然后在项目根目录的urls.py中添加Media路由，确保开发环境下Django能提供Media文件访问：

# 项目根urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('your_app_name.urls')),  # 替换为你的实际app路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. 修改序列化器返回完整图片URL #

更新serializer.py中的PostSerializer，通过SerializerMethodField拼接完整绝对URL：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    image = serializers.SerializerMethodField()

    class Meta:
        model = Post
        fields = '__all__'

    def get_image(self, obj):
        request = self.context.get('request')
        if obj.image and request:
            return request.build_absolute_uri(obj.image.url)
        return obj.image.url

3. 在视图中传入请求上下文 #

修改views.py中的home视图，将request对象传入序列化器的context：

@api_view(['GET'])
def home(request):
    posts = Post.objects.all()
    serializer = PostSerializer(posts, many=True, context={'request': request})
    return Response(serializer.data)

临时前端方案（不推荐） #

若暂时不想修改后端代码，可在前端手动拼接后端域名：

// BlogExcerpt.jsx
const BlogExcerpt = ({post, postid}) => {
  const backendUrl = 'http://127.0.0.1:8000';
  return (
    <div>
      <p>{post.title}</p>
      <img src={`${backendUrl}${post.image}`} alt='yep' />
    </div>
  )
}

验证 #

完成修改后重启Django和React服务，前端获取的post.image会是完整的后端Media URL，图片即可正常渲染。

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