Profile picture is not getting displayed in django template base html page

Question

I am creating a taskToDo web application. Most of the html files under templates are extending base.html file which includes a navbar in which i want to show the user profile picture under navbar of base.html. The profile picture is getting saved under profile_pics directory of 'media' folder.

I have tried giving {{user.profile_pic.url}} as the source for image, but still the image is not getting linked My models.py , project urls.py, settings.py, relevant part of views.py are as follows:-

models.py

from django.db import models
from django.contrib.auth.models import User
from django.conf import settings
from django.core.exceptions import ValidationError
from datetime import datetime
# Create your models here.

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

    profile_pic=models.ImageField(upload_to='profile_pics',blank=True)

    def __str__(self):
        return self.user.username   #user os object defined above


class UserTask(models.Model):
    author = models.ForeignKey(User,on_delete=models.CASCADE)
    label=models.CharField(max_length=264)
    date=models.DateField()
    status=models.BooleanField(default=False)


    def __str__(self):
        return str(self.label)

settings.py

from django.contrib import admin
from django.urls import path,include
from taskApp import views
from django.conf.urls.static import static
from django.conf import settings # new
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index,name='index'),
    path('taskApp/',include('taskApp.urls')),
    path('logout/',views.user_logout,name='logout'),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

forms.py

from django import forms
from django.forms.fields import DateField
from django.core import validators
from django.contrib.auth.models import User
from taskApp.models import UserCustom,UserTask
from django.contrib.admin.widgets import AdminDateWidget
from datetime import datetime,timedelta

class UserForm(forms.ModelForm):
    password=forms.CharField(widget=forms.PasswordInput())

    class Meta():
        model=User
        fields=('username','email','password')

class UserCustomForm(forms.ModelForm):
    class Meta():
        model=UserCustom
        fields=('profile_pic',)


class UserTaskForm(forms.ModelForm):
    date=DateField(widget=forms.DateInput(attrs={'placeholder': 'YYYY-MM-DD', 'required': 'required'}))
    status=forms.BooleanField(required=False)
    class Meta():
        model=UserTask
        fields=('label','date')

    def clean(self):
        cleaned_data=self.cleaned_data
        date2=cleaned_data.get('date')
        if str(date2)<=(datetime.today()-timedelta(days=1)).strftime('%Y-%m-%d'):
            raise forms.ValidationError("The date cannot be in the past!")
        return cleaned_data

views.py (relevant part)

@login_required
def my_task(request):
    task_obj=UserTask.objects.filter(author=request.user)
    return render(request,'taskApp/task.html',{'task_obj':task_obj,'user_key':request.user})

def register(request):

registered=False

if request.method == "POST":

    user_form=UserForm(data=request.POST)
    profile_form=UserCustomForm(data=request.POST)

    if user_form.is_valid() and profile_form.is_valid():
        user=user_form.save()
        user.set_password(user.password)
        user.save()

        profile=profile_form.save(commit=False)
        profile.user=user

        if 'profile_pic' in request.FILES:
            profile.profile_pic=request.FILES['profile_pic']

        profile.save()
        registered=True

    else:
        print(user_form.errors,profile_form.errors)

else: #no request=POST yet
    user_form=UserForm()
    profile_form=UserCustomForm()

return render(request,'taskApp/registration.html',{'user_form':user_form,'profile_form':profile_form,'registered':registered })


def register(request):
    registered=False

    if request.method == "POST":

        user_form=UserForm(data=request.POST)
        profile_form=UserCustomForm(data=request.POST)

        if user_form.is_valid() and profile_form.is_valid():
            user=user_form.save()
            user.set_password(user.password)
            user.save()

            profile=profile_form.save(commit=False)
            profile.user=user

            if 'profile_pic' in request.FILES:
                profile.profile_pic=request.FILES['profile_pic']

            profile.save()
            registered=True

        else:
            print(user_form.errors,profile_form.errors)

    else: #no request=POST yet
        user_form=UserForm()
        profile_form=UserCustomForm()

    return render(request,'taskApp/registration.html',{'user_form':user_form,'profile_form':profile_form,'registered':registered })



def user_login(request):

    if request.method=='POST':
        username=request.POST.get('username')  #name of element
        password=request.POST.get('password')

        user=authenticate(username=username,password=password)

        if user:
            if user.is_active:
                login(request,user)
                return HttpResponseRedirect(reverse('taskApp:myTask')) #myTask is the name of url , go to urls.py
            else:
                return HttpResponse("ACCOUNT NOT ACTIVE")

        else:
            print("Someone tried to login and failed!")
            print("Username: {} and password {}".format(username,password))
            return HttpResponse("invalid login details supllied!")

    else:
        return render(request,'taskApp/login.html',{})

base.html


{% load static %}

  
    
    
    
    



    

    

  
  
    
      

        
          ToDoList
          
          Admin
        

        
          {% if user.is_authenticated %}
            My Tasks
            Add Task

        

        
               {{user}} 
               
              Logout
        
        
        {% else %}
            Register
            Login
        {% endif %}
        


      

    

    

      {% block body_block %}
      {% endblock %}

Mehmet Can · Accepted Answer

Where did you use UserCustomForm? There is nothing related with this form in your views.py for passing image to DB. I will consider as you are trying to add image on admin panel for now.

On your html file, you can't access profile_pic directly from user. Try this src="{{user.usercustom.profile_pic.url}}"

from django.core.files.storage import FileSystemStorage add this to top of views.py

and edit related lines in register function with this

image = request.FILES['profile_pic']
if image:
    filename = FileSystemStorage().save('profile_pics/' + image.name, image)
    profile.profile_pic = filename
profile.save()

Edit: image =request.FILES['profile_pic] is not string although we have to pass it to DB as string. image.name is a string we need but without MEDIA_ROOT value. FileSystemStorage appends the MEDIA_ROOT value to any file it saves

Profile picture is not getting displayed in django template base html page

Answers (1)

Related Questions