Hey everyone! I am a beginner to Django (version = 5.0) and I have issue in viewing user-uploaded content on their profile page that is being rendered on HTML. I have installed Pillow library properly and I tried all methods but I can’t seem to understand what the issue seems to be.
views.py
@login_required
def user_profile(request):
return render(request, "register_user/profile.html")
urls.py
from django.urls import path
from register_user import views
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static
# url patterns
app_name = 'register_user'
urlpatterns = [
path("", views.index, name="register-index"),
path("signup/", views.userRegister, name="register-user"),
path("login/", auth_views.LoginView.as_view(template_name='register_user/login.html'), name="login"),
# path("login/", views.login_user ,name="login"),
path("profile/", views.user_profile, name="profile"),
path("logout/", views.logout_user, name="logout"),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
models.py
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class Profile(models.Model):
user = models.OneToOneField(User, on_delete = models.CASCADE)
image = models.ImageField(default = "default.jpg", upload_to='profile_pics')
def __str__(self) -> str:
return f"{self.user.username} Profile"
settings.py
STATIC_DIR = BASE_DIR / 'static'
STATIC_URL = "static/"
STATICFILES_DIRS = [STATIC_DIR,]
# MEDIA
MEDIA_ROOT = BASE_DIR / "media"
MEDIA_URL = "media/"
profile.html
{% block content_block %}
<div class="card border-light mb-3" >
<img src="{{ user.profile.image.url }}" alt="Card image cap">
<div class="card-header">Username ~ {{ user.username }}</div>
<div class="card-body">
<h5 class="card-title">{{user.first_name}} {{user.last_name}}</h5>
<p class="card-title"> Your email -> {{user.email}} </p>
</div>
</div>
{% endblock content_block %}
I created a profile object through admin and uploaded an image. And then I tried displaying it through profile.html and it shows this error->
I have tried resizing the image to make it smaller and have also manually checked that the image is present in that folder by going to that directory. I am clueless, kindly help.