Default profile photo not being displayed - django

Question

I am working on a twitter clone app and i want users to have a default profile photo when they sign up and login. I have set up the model to upload the default image but for some reason its not displaying.
models.py
from django.db import models
from django.contrib.auth.models import User
#import pylibjpeg_libjpeg
from PIL import Image
# Create your models here.
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
image = models.ImageField(upload_to='profile_pics', default='default.png')
def __str__(self):
return f'{self.user.username} Profile'
#property
def followers(self):
return Follow.objects.filter(follow_user=self.user).count()
#property
def following(self):
return Follow.objects.filter(user=self.user).count()
def save(self, force_insert=False, force_update=False, using=None, update_fields=None):
super().save()
img = Image.open(self.image.path)
if img.height > 300 or img.width > 300:
output_size = (300, 300)
img.thumbnail(output_size)
img.save(self.image.path)
views.py
#login_required
def profile(request):
if request.method == 'POST':
uform = UserUpdateForm(request.POST, instance=request.user)
pform = ProfileUpdateForm(request.POST, request.FILES, instance=request.user.profile)
if uform.is_valid() and pform.is_valid():
uform.save()
pform.save()
messages.success(request, f'Account updated.')
return redirect('profile')
else:
uform = UserUpdateForm(instance=request.user)
pform = ProfileUpdateForm(instance=request.user.profile)
return render(request, 'Users/profile.html', {'uform': uform, 'pform': pform})
settings file
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
html file
<article class="media content-section" style="height:140px; width:100%">
{% if user_profile != None %}
<div class="mt-2 d-flex full-width align-items-center">
<img class="rounded-circle mr-3 img-fluid" style="width:90px; height:90px" src="{{ user_profile.profile.image.url }}">
<div>
<h4 style="text-align: left" class="white-important">
{{ user_profile.username}}
</h4>
<h6 style="text-align:left" class="email-profile">
{{ user.email }}
</h6>
</div>
</div>
{% else %}
<div class="mt-2 d-flex full-width align-items-center">
<img class="rounded-circle mr-3" style="width:90px; height:90px;" src="{{ user.profile.image.url }}" alt="profile picture">
<div>
<h4 style="text-align: left" class="white-important">
{{ user.username }}
</h4>
<h6 style="text-align:left" class="email-profile">
{{ user.email }}
</h6>
</div>
</div>
{% endif %}
my project's urls.py file
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static
from Users import views as users_views
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', auth_views.LoginView.as_view(template_name='Users/login.html'), name='login'),
path('logout/', auth_views.LogoutView.as_view(template_name='Users/logout.html'), name='logout'),
path('password-reset/', auth_views.PasswordResetView.as_view(template_name='Users/password_reset.html'),name='password-reset'),
path('password-reset/done', auth_views.PasswordResetDoneView.as_view(template_name='Users/password_reset_done.html'), name='password-reset-done'),
path('password-reset/confirm/<uid64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name='Users/password_reset_confirm.html'), name='password-reset-done'),
path('register/', users_views.register, name='register-users'),
path('profile/', users_views.profile, name='profile'),
path('search/', users_views.SearchView, name='search'),
path('', include("Blog.urls")),
]
if settings.DEBUG is True:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
here's the screenshot of the output after the user logs in

Answer 1

It seems like you are not serving the media files locally. Check the documentation here

Answer 2

inspect the image on your browser and see what is being rendered. also, try adding a trailing slash to the media_root such that it is MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

Answer 3

In views.py check the indentation of pform.save() ...
if still not working follow/check these steps :
settings.py:
STATIC_DIR = os.path.join(BASE_DIR,"static")
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
#MEDIA
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
LOGIN_URL = 'user_login'
create a folder named media with a subfolder profile_pics in your base directory (the folder where you have your manage.py file)
also check this similar code :
models.py :
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class user_profile(models.Model):
#using default User model by linking
user = models.OneToOneField(User, on_delete=models.CASCADE)
#additional fields
website = models.URLField(blank=True)
profile_picture = models.ImageField(upload_to='profile_pictures' , blank = True )
bio = models.CharField(blank=True, max_length=300)
def __str__(self):
return self.user.username
forms.py:
from django import forms
from django.contrib.auth.models import User
from .models import user_profile
class User_form(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ("username", "email" , "password")
class user_profile_form(forms.ModelForm):
class Meta:
model = user_profile
fields = ("profile_picture", "website" , "bio")
views.py :
def signup(request):
registered = False
if request.method == "POST":
user_form = User_form(data=request.POST)
user_profileform = user_profile_form(data=request.POST)
if(user_form.is_valid() and user_profileform.is_valid()):
user = user_form.save()
user.set_password(user.password)
user.save()
profile = user_profileform.save(commit=False)
profile.user = user
if 'profile_picture' in request.FILES:
profile.profile_picture = request.FILES['profile_picture']
profile.save()
registered = True
else:
print(user_form.errors, user_profileform.errors)
else:
user_form = User_form()
user_profileform = user_profile_form()
return render(request, "registration/signup.html", {'user_form': user_form , 'user_profileform' : user_profileform, 'registered' : registered } )
Also make sure your template form has the "multipart/form-data":
signup.html :
<form enctype="multipart/form-data" method="POST">
<div class="container sign-form">
{% csrf_token %}
{{ user_form |as_bootstrap }}
{{ user_profileform |as_bootstrap }}
<!-- {{ user_profileform.as_p }} -->
<input type="submit" class = “btn btn-default” name="submit" value="submit">
also check if you are rendering the image in the template properly . something like this ,
<div class="container">
<img src="media/{{[context_object_name].image}}" class="imgbar" id="img">
</div>
even now not solved, open the browser console and let know what is the error displayed
edit :
add this[+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)] to your urls.py,
urls.py:
from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
app_name = 'homepage'
urlpatterns = [
path('', views.home , name = "home"),
path('contact', views.contact , name = "contact"),
path('about', views.about , name = "about"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)