Django React Image wont display - django

Question

So I recently was trying to deploy my website and I was able to get everything working. However, the images are broken for some reason. I can actually add images to the database fine (easily able to add and change the image itself). However, when I click on the link I go nowhere instead of seeing the image and just see the part of my site that pops up whenever the URL entered isn't part of the API (no error, instead nothing basically shows up). The strange part is that the uploaded images actually get added to my images folder in my project but it seems like Django can't find them afterwards (you can see the image is in the database in my images folder). Here is how my project is laid out and: Here is some of my code:
SETTINGS.PY
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'build/static'),
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
REST_FRAMEWORK = {
'DEFAULT_AUTHETICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication'
]
}
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR),'EZtrade')
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'build')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
URLS.PY
urlpatterns = [
path('api-auth/', include('rest_framework.urls')),
path('admin/', admin.site.urls),
path('api/', include('articles.api.urls')),
path('rest-auth/', include('rest_auth.urls')),
path('rest-auth/registration/', include('rest_auth.registration.urls')),
re_path('.*',TemplateView.as_view(template_name='index.html')),
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT,})
] + static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)
API URLS
router = DefaultRouter()
router.register(r'articles', ArticleViewSet, basename='articles')
router.register(r'trade', TradeViewSet, basename='trade')
router.register(r'users', UserDataViewSet, basename='users')
urlpatterns = router.urls + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
MODEL
class Article(models.Model):
title = models.CharField(max_length=120)
content = models.TextField()
image = models.ImageField(upload_to = 'images', blank=True)
createdBy = models.CharField(max_length=120)
traded = models.BooleanField(default=False)
city = models.CharField(max_length=120)
def __str__(self):
return self.title
VIEWS.PY
class ArticleViewSet(viewsets.ModelViewSet):
serializer_class = ArticleSerializer
queryset = Article.objects.all()
filter_backends = [DjangoFilterBackend,filters.SearchFilter]
filterset_fields = ['createdBy','traded']
search_fields = ['title']
authentication_classes = (TokenAuthentication,) # Add this line
permission_classes = (IsAuthenticated,)
def get_permissions(self):
if self.action == 'list' or self.action == 'retrieve':
return [AllowAny(), ]
return super(ArticleViewSet, self).get_permissions()
def patch(self, request, pk):
testmodel_object = self.get_object(pk)
serializer = TestModelSerializer(testmodel_object, data=request.data, partial=True)
if serializer.is_valid():
serializer.save()
return JsonResponse(code=201, data=serializer.data)
return JsonResponse(code=400, data="wrong parameters")
SERIALIZERS.PY
class ArticleSerializer(PatchModelSerializer):
class Meta:
model = Article
fields = ('id','title','content','image','createdBy','traded','city')
I have tried many different things and have not been able to find anything else like this on the internet since I dont even get an error when trying to access the image. Im pretty stuck with this so if anyone could help that would be awsome!

Answer 1

you have to make an another serializer using method and pass image url on that like this
class ArticleSerializer(PatchModelSerializer):
image_url = serializers.SerializerMethodField('get_image_url')
class Meta:
model = Article
fields = ('id','title','content','image','image_url','createdBy','traded','city')
def get_image_url(self, obj):
return obj.image.url

Answer 2

I figured out that I had to put the re_path at the end since it was overriding my image url.

Answer 3

i just figured out that the problem is in the urls.py file
it's missing some code
here is mine before
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls'))
]
and here is after i saw this article
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls'))
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)