Display profile image in nav bar - html

Question

I am building my own blog site.
I managed to have the users upload their own profile pic and have it displayed beside their post but now i want to have that same image be displayed in the navbar as a profile image but when i do it the same way i did it with the posts it doesnt work and looks like this.
For the posts i made a profile image model and accessed the variable from within the html file but the same method does not work for displaying it in the nav bar.
I am using python and django for backend.
This is my model code for the profile image:
from django.db import models
from django.contrib.auth.models import User
from PIL import Image
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):
return f"{self.user.username} Profile"
def save(self, *args, **kwargs):
super().save(*args, **kwargs)
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)
This is how i reference it in my html file for displaying next to posts:
<img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}" id="img">
When i use any other image(either from a url or a local file) it works perfectly but when I use that variable to call the image it doesn't work
It might be worth mentioning that the navbar and post sections are in different html files. it looks like the nav bar's html file does not have access to that variable?
What am I doing wrong?

Answer 1

Try this:
<img class="rounded-circle article-img" src="{{ request.user.profile.image.url }}" id="img">