[Fix] Default Profile Picture Not Showing in Django

In this tutorial, we will learn how to fix the issue of the default profile picture not showing in Django.

This problem can occur when you have set up a default profile picture for your user profiles but it’s not displaying correctly on your Django web application.

The Problem

Let’s assume you have created a Profile model that extends the built-in User model in Django. The Profile model has an image field to store the profile picture.

You have also set a default profile picture in the image field, but when you visit the user profile page, the default picture is not showing up.

Here’s the code that we’ll be working with:

# models.py
class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    image = models.ImageField(default="profile_pictures/default.png", upload_to='profile_pictures')
    location = models.CharField(max_length=100)

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

<!-- profile.html -->
{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <h1>{{ user.username }}'s Profile</h1>
            <img src=" user.profile.image.url }}" class="img-thumbnail" alt="Profile Image">
        </div>
    </div>
</div>
{% endblock content %}

Steps to Fix Default Profile Picture Not Showing in Django

To fix the issue of the default profile picture not showing, we need to ensure that Django serves the static files correctly.

Here are the steps to follow:

1. Configure Static Files Settings

In your settings.py file, ensure that you have the following settings configured correctly:

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

2. Configure Media Files Settings

Since the image field in the Profile model is an ImageField, we need to configure the media file settings in settings.py:

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

3. Update URL Patterns

In your project’s urls.py file, add the following lines at the end to serve the static and media files in development:

from django.conf import settings
from django.conf.urls.static import static

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

4. Add .URL attribute

In some cases, the issue of the default profile picture not showing might be caused by the way the image URL is being rendered in the template.

You can try adding the .url attribute to the image field when rendering it in the template.

<img src=" user.profile.image.url }}" class="img-thumbnail" alt="Profile Image">

5. Restart the Development Server

After making the above changes, restart your Django development server. The default profile picture should now be visible on the user profile page.

Also Read:

Conclusion

By following the steps outlined in this tutorial, you should be able to resolve the issue of the default profile picture not showing in your Django application.

Proper configuration of static and media file settings is crucial for correctly serving images and other static assets.

Remember to remove the static() URL pattern when deploying your Django application to a production server, as it is intended for development use only.