Изображение не загружается из фреймворка django rest в react

я новичок в drf. я хочу загрузить изображение из django rest framework в react, но изображение не отображается в react.

views.py


def PostView(request):
    parser_classes = (MultiPartParser, FormParser,JSONParser)
    if request.method=="GET":
        post = Post.objects.all()
        post_serializer = PostSerializer(post, many=True)
        return Response(post_serializer.data)

Seriliazer.py


class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = "__all__"

settings.py

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

Вызов Аксиос

 async function getPost() {
    await axios
      .get(
        "http://127.0.0.1:8000/api/post/"
     
      )
      .then((res) => {
        console.log(res.data);
        setPost(res.data);
      });
  }

а код реакции -


<div className="card mb-3" key={res.id}>
          <img className="card-img-top" src={`http://127.0.0.1:8000${res.image}`} alt="post image" />
          <div className="card-body">
            <h4>{res.title}</h4>
            <p className="card-text">{res.image}</p>
          </div>

далее следует мой ответ API далее следует ответ моего API

и ошибка браузера

ошибка

Вы должны передать контекст в сериализатор. Благодаря этому DRF будет добавлять домен к изображению.

Измените его на этот

post_serializer = PostSerializer(post, many=True, context={"request": request})

измените тег p на <img src={res.image}/>, должно получиться, если он передается как url

Вернуться на верх