I can't view images on template despite they are uploaded

Using Django Deployment
1

This is my comment model:

class Comment(models.Model):
    author = models.ForeignKey('users.User', on_delete=models.CASCADE, null=True, blank=False)
    dicom_file = models.ForeignKey('DicomFile', on_delete=models.CASCADE, null=True, blank=False)
    comment = models.TextField(blank=False)
    comment_time = models.DateTimeField(auto_now_add=True)
    image_url = models.ImageField(upload_to='uploads/screenshots/%Y/%m/%d/', blank=True, null=True)

    class Meta:
        ordering = ['comment_time']

This is what I set in my settings.py:

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

MEDIA_URL = '/media/'

When I upload image using the form on website, the image is uploaded like this:
media/uploads/screenshots/2022/04/12/20141224_135452.jpg

media folder is in the root project folder (the same folder where manage.py file is).

This is how I try to view image in my template:

<img src="{{ comment.image_url.url }}">

This is how it’s rendered:

<img src="/media/uploads/screenshots/2022/04/12/20141224_135452.jpg">

But I can’t view my image. Why? How can I fix it?

2

Are you serving the files? How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django

3

Side note: Generally speaking - and in almost every case in a production environment, you do not want your media to be uploaded within your project directory. While in a development environment, that’s fine. But when you’re ready to deploy, you want that to be somewhere else.