Как я могу вызвать мое изображение в медиа-каталоге django?

Когда я вызываю изображение из шаблона, оно работает, когда я вызываю его так,

<img src=http://127.0.0.1:8000/media/img/profile/8.jpg class="avatar rounded-circle img-thumbnail" alt="avatar">

Я попытался сделать то же самое, используя url

src = {{MEDIA_URL}}/img/profile/8.jpg
src = "{{MEDIA_URL}}/img/profile/8.jpg"
src = "media/img/profile/8.jpg"

это не сработало я пробовал разные вариации этого, делая изменения как указано выше.

my settings.py

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

my views.py

def view_profile(request):

user_files = UserFiles.objects.all()
user_fields = Profile.objects.all()

context = {
    'title': 'profile',
    'files': user_files,
    'user_fields': user_fields,
}

return render(request, 'member/profile.html', context)

my models.py

class UserFiles(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)

def profile_image_upload_path(instance, filename):
    return f'img/profile/{filename}'

picture = models.ImageField(
    upload_to=profile_image_upload_path, blank=True)

def profile_letter_upload_path(instance, filename):
    return f'files/letter/{filename}'

letter = models.FileField(upload_to=profile_letter_upload_path, blank=True)

def profile_medical_upload_path(instance, filename):
    return f'files/medical/{filename}'

medical = models.FileField(
    upload_to=profile_medical_upload_path, blank=True)

def __str__(self):
    return self.user.username

my urls.py

urlpatterns = [
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Может кто-нибудь показать мне, как показать файлы во фронтенде, используя этот тег или подобный синтаксис медиа Я могу просматривать файл изображения как url в браузере,

{% for fields in user_fields %}

                <div class="form-group row">
                    <label for="staticEmail" class="col-sm-2 col-form-label"> 
   {{fields.label}}</label>
                    <div class="col-sm-10">
                        <input type="text" readonly class="form-control-plaintext" id=" 
   {{fields.name}}"
                            value="{{fields.value}}">
                    </div>

                </div>
 {% endfor %}

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # notice there's no `/`

 {% for fields in user_fields %}

   <img src="{{ fields.picture.url }}" class="avatar rounded-circle img-thumbnail" alt="avatar">

     {% endfor %}