Как я могу отправлять изображения из Django Rest Api в Vue SPA?

Question

Я занимаюсь разработкой одностраничного приложения Vue.js 2.0 с API-интерфейсом DRF REST на сервере. У меня есть изображения, хранящиеся в файловой системе, и одна из моих моделей имеет поле под названием «изображение», содержащее адрес изображения.

Моя модель:

class Board(models.Model):
    name = models.CharField(max_length=100)
    description = models.CharField(max_length=400)
    image = models.FileField(upload_to='boards/')
    safe_for_work = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)

Просмотр:

class BoardViewSet(viewsets.ViewSet):
    serializer_class = BoardSerializer

    def list(self, request,):
        queryset = Board.objects.filter()
        serializer = BoardSerializer(queryset, many=True)
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = Board.objects.filter()
        board = get_object_or_404(queryset, pk=pk)
        serializer = BoardSerializer(board)
        return Response(serializer.data)

Когда я вызываю свою конечную точку из моего Vue SPA, вместо получения изображения, я получаю только локальный URL, например "/storage/boards/board1.jpg".

Как я могу получить доступ к фактическому изображению на моей странице Vue?

В идеале я хотел бы получить список всех изображений с конечной точки и отобразить их.

Answer 1

С этой проблемой вы должны сконфигурировать на сервере (Django Rest) вместо клиента Vue. Настройте ваш сериализатор для отображения полного пути к изображению:

class BoardSerializer(ModelViewSet)
     image = FileField(source='image')
     class Meta:
        model = Article
        fields = [
            'id',
            'image',
            ...
        ]

Не забудьте context: { 'request': request } в Viewset

def list(self, request,):
        queryset = Board.objects.filter()
        serializer = BoardSerializer(queryset, many=True, context: { 'request': request })
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = Board.objects.filter()
        board = get_object_or_404(queryset, pk=pk)
        serializer = BoardSerializer(board, context: { 'request': request })
        return Response(serializer.data)

Надеюсь, это поможет!