How can I display images in Django media directory in the HTML template?

Question

When I call an image in a template as shown below, it works:

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

I tried to do the same using URL:

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

it did not work despite the variations shown above.

My settings.py:

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

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 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 urls.py:

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

Can someone show me how to show files in my front-end using this tag, or similar syntax media so I can view typing image file as a url in the browser?

    {% 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 %}

thanks in advance, yeah I tried that way too using a for loop and ```{{image.url}}``` but did not work. — Nadun Udaraka Bandara, Dec 17 '22 at 18:57
Iteration variable is `fields`. `UserFiles` model field is `picture`. it's `fields.picture.url`, not `image.url`. — Ivan Starostin, Dec 17 '22 at 20:14

score 2 · Accepted Answer · answered Dec 17 '22 at 22:43

2

I suggest you start by changing your settings.py media settings to:

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

As for displaying the images in an HTML template, I recommend @Ivan Starostin's suggestion,

 {% for fields in user_fields %}

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

     {% endfor %}

The last question involving is a bit unclear.

answered Dec 17 '22 at 22:43

sajeyks mwangi

549
8
20

Thanks for the sugession I'll try it. – Nadun Udaraka Bandara Dec 18 '22 at 05:01
sorry it was my mistake your sugession was helpful to corrcet the error. – Nadun Udaraka Bandara Dec 18 '22 at 07:22

How can I display images in Django media directory in the HTML template?

1 Answers1