How can I send images from Django Rest Api to a Vue SPA?

Question

I am developing a Vue.js 2.0 single page application with DRF REST api on the backend. I have images stored in filesystem and one of my models has a field called "image" containing the address of the image.

My model:

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)

Viewset:

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)

When i call my endpoint from my Vue SPA, instead of getting the image, I only get the local url, for example "/storage/boards/board1.jpg".

How can I access the actual image on my Vue page?

Ideally I would like to get a list of all the images from the endpoint and display them.

Do you want to get the **full** url or the base64 encoded image? — yorodm, Nov 02 '18 at 14:37
I wanted to know if it's possible to send the image and if it's a correct way of handling this problem. — dr Pavel, Nov 02 '18 at 14:42
Does [this](https://stackoverflow.com/questions/35522768/django-serialize-imagefield-to-get-full-url) solves your problem? — yorodm, Nov 02 '18 at 14:49

score 0 · Answer 1 · answered Nov 04 '18 at 08:01

With this issue you must config in server (Django Rest) instead of Vue client. Config your serializer to display full path of image:

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

Don't forget context: { 'request': request } in 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)

Hope it helps!

How can I send images from Django Rest Api to a Vue SPA?

1 Answers1