How to get image url in vue from django rest project

Question

I stored image file in path djangor_prject_name/pictures/image_name.jpg by using

models.ImageField(upload_to='pictures/services/', max_length=255, null=True, blank=True)

and file is uploaded successfully. But while retrieving, what is the exact url to view image? Because id Database, the value is just

picutes/services/image_name.jpg

So, in my view file, I am using vue.js and need full path or url of the image to display.

score 3 · Accepted Answer · answered Apr 22 '19 at 13:08

After creation it won't give you full url, but in the list it will come with full url. So for that you use custom serializers.SerializerMethodField.

class TestSerializer(serializers.ModelSerializer):
    photo = serializers.SerializerMethodField()

    class Meta:
        model = Test
        fields = ('photo',) 

    def get_photo(self, car):
        request = self.context.get('request')
        photo = Test.photo.url
        return request.build_absolute_uri(photo)

For further details refer here

How to get image url in vue from django rest project

1 Answers1