Can't display image on browser with django rest framework

Question

I've a problem similar to this SO post, but none of its answers helped me to solve my issue.

Here we are : I'm able to save an image on the server but not able to get Image from API image hyperlink.

My files :

model.py

class Summary(models.Model):

    question_text = models.CharField(max_length=255)
    created_at = models.DateTimeField(auto_now_add=True)
    cover_image = models.ImageField(upload_to='cover_image/', max_length=255)
    userProfileSummary = models.ManyToManyField(UserProfile, through='UserProfileSummary')

    def __str__(self):
        return self.question_text

views.py

class Summary(models.Model):

    question_text = models.CharField(max_length=255)
    created_at = models.DateTimeField(auto_now_add=True)
    cover_image = models.ImageField(upload_to='cover_image/', max_length=255)
    userProfileSummary = models.ManyToManyField(UserProfile, through='UserProfileSummary')

    def __str__(self):
        return self.question_text

serializer.py

class SummarySerializer(serializers.ModelSerializer):
    """A serializer for summary item"""
    cover_image = serializers.ImageField(max_length=None, use_url=True)

    class Meta:
        model = models.Summary
        exclude = ('userProfileSummary',)

settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS =(
    os.path.join(BASE_DIR, 'static'),
    '/static',
)

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

urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from django.conf.urls.static import static
from django.conf import settings
from . import views

router = DefaultRouter()
router.register('Hello-viewset', views.HelloViewSet, base_name='hello-viewset')

urlpatterns= [
    path('hello-view/', views.HelloApiView.as_view()),
    path('UserProfileSummary/<int:id>/', views.UserProfileSummaryViewSet.as_view()),
    path('', include(router.urls))
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

App structure :

- myproject/
 - cover_image/
 - media/
 - myproject_api/
  - models.py
  - serializers.py
  - ...
  - myproject/
   - settings.py
   - ...

And also, my main urls.py file (myproject/urls.py)

from django.contrib import admin
from django.urls import path, include
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myproject_api.urls'))
]

I can Make a Request For POST successfully & It show correct image link but when i click on image link it gives error.

What's wrong ?

Please help !

Answer 1

The issue is that you have added static media url in your app/urls. Move the same to your project/urls

project/urls.py

from django.conf.urls import include, url
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myproject_api.urls')),
    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT,})
]