Iqbal Hussain
Iqbal Hussain

Reputation: 1105

Image is not showing in DRF

I get the serializer data properly but when I click the url of the image it shows error even that image stores properly to the directory. I am not getting what is the issue here. Please suggest me what should I do to show the image.

models.py:

class TutorProfile(models.Model):

    user = models.ForeignKey(
      settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    travelling_distance = models.CharField(_("Traveling Distance"),max_length=255,null=True,blank=True)  
    where_tutoring = models.CharField(_("Where Tutoring"),max_length=255,null=True,blank=True)  
    taken_out_to_store_account =  models.BooleanField(_("Taken To Store Credit Card"),default=False)  
    account_number = models.PositiveIntegerField(_("Account Number"),default=0)  
    routing_number = models.PositiveIntegerField(_("Routing Number"),default=0) 
    upload = models.FileField(null=True, 
                           blank=True,upload_to="uploads/%Y/%m/%d", 
                           validators=[FileExtensionValidator( ['pdf','jpg','jpeg','pjp','pjpeg','jfif','png','webp'] ) ]) 

    university = models.CharField(_("University"),max_length=255,null=True,blank=True)  
    years_of_experience = models.CharField(_("Years Of Experience"),max_length=255,null=True,blank=True)  

    professional_photo = models.ImageField(upload_to = user_directory_path)
    bio_teacher =  models.TextField() 
    tutor_profile_completed = models.BooleanField(default=False) 
    tutoring_subject = models.ForeignKey(
      TutoringSubject, on_delete=models.CASCADE,blank=True, null=True) 
    tutor_availablility = models.ManyToManyField(
      Day)   

    booking_date =  models.CharField(_("Booking Date"),max_length=255,null=True,blank=True)     
    def save(self, *args, **kwargs):
        self.user_type = 'Teacher'
        # if self.brief_description_of_child is not Null 
        if self.bio_teacher:
           self.tutor_profile_completed = True
           super(TutorProfile, self).save(*args, **kwargs)

    def __str__(self):
        return self.travelling_distance

serializers.py

class TutorProfileSerializer(serializers.ModelSerializer):
    
    user = serializers.PrimaryKeyRelatedField(read_only=True, default=serializers.CurrentUserDefault(),source = 'user.username')
    image_url = serializers.SerializerMethodField('get_image_url')

    class Meta:
        model = TutorProfile
        fields = '__all__'

    

    def get_image_url(self, obj):
        request = self.context.get("request")
        return request.build_absolute_uri(obj.professional_photo.url)

viewsets.py

@authentication_classes([TokenAuthentication])
@permission_classes([IsAuthenticated])
class TutorprofileViewSet(ModelViewSet):
    serializer_class = TutorProfileSerializer
    http_method_names = ["post","delete","get"]
    queryset = TutorProfile.objects.all()  
    def perform_create(self, serializer):
        serializer.save(user=self.request.user)  

    def get_queryset(self):
        """
        This view should return a list of all the services
        for the currently authenticated user.
        """
        _user = self.request.user
        return TutorProfile.objects.filter(tutor_profile_completed=True)  

urls.py

router.register("tutor_profile", TutorprofileViewSet, basename="tutor_profile")

I get the data properly. But When I hit the url it does not show the image!!:

Upvotes: 0

Views: 370

Answers (2)

kwamito
kwamito

Reputation: 292

I'm not sure if you MEDIA_URL setting has been set correctly and an image uploaded but why don't you do this instead.

class TutorProfileSerializer(serializers.ModelSerializer):
    
    user = serializers.PrimaryKeyRelatedField(read_only=True, default=serializers.CurrentUserDefault(),source = 'user.username')
    image_url = serializers.ImageField(source='professional_photo')

    class Meta:
        model = TutorProfile
        fields = '__all__'

Upvotes: 1

Shayan
Shayan

Reputation: 338

Make sure you add your media URL to your project urlpatterns so that you can serve them. For configuring your static files such as HTML, CSS, JS, and images you can read the docs.

Upvotes: 1

Related Questions