I've been working on creating my own blog website.
Initially, I was able to allow users to upload their profile picture and have it displayed next to their posts. Now, I want that same image to appear in the navigation bar as a profile image. However, when I try to implement it using the same method as with the posts, it doesn't work and ends up looking like this:
https://i.sstatic.net/1wTyE.png
For the posts, I created a profile image model and accessed the variable within the HTML file. But unfortunately, the same approach does not seem to work for displaying it in the navigation bar.
I am using Python and Django for the backend of my website.
Below is the 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 it next to posts:
<img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}" id="img">
When I use any other image (whether from a URL or a local file), it works perfectly. But when I try to call the image using that variable, it doesn't work.
It's worth noting that the navigation bar and post sections are in different HTML files. It seems like the HTML file for the navigation bar doesn't have access to that variable?
What could be causing this issue? Any guidance would be greatly appreciated.