I have been trying to display an image using Django in my HTML.
Normally do display a static file somebody would do:
<img src="{% static 'user_profile_pics/pfp_2.jpg' %}" >
This image static file has been stored in the variable picture in my models.py.
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
bio = models.TextField(max_length=500, blank=True)
picture = models.TextField(max_length=500)
The user selects the image they want to choose as their profile image. The views.py file is below with the profile definition having the request JSON dictionary with the variable picture being assigned to the model profile.picture.
@login_required
def profile(request):
profile = Profile.objects.get(user = request.user)
return render (request, "profile.html", {"userinfo": {'bio': profile.bio, 'picture': profile.picture}})
def register(request):
if request.method == 'POST':
first_name = request.POST['first_name']
last_name = request.POST['last_name']
username = request.POST['username']
email = request.POST['email']
password = request.POST['password']
confirm_password = request.POST['confirm_password']
bio = request.POST['bio']
picture = request.POST['picture']
if password==confirm_password:
if User.objects.filter(username=username).exists():
messages.info(request, 'Username is already taken')
return redirect(register)
elif User.objects.filter(email=email).exists():
messages.info(request, 'Email is already taken')
return redirect(register)
else:
user = User.objects.create_user(username=username, password=password, email=email, first_name=first_name, last_name=last_name)
user.save()
profile = Profile(bio=bio, picture=picture, user=user)
profile.save()
return redirect('login_user')
else:
messages.info(request, 'Both passwords are not matching')
return redirect(register)
else:
return render(request, 'registration.html')
Next up, displaying the bio and picture within the profile html works like this.
<div id = "userprofiletext">
{% if user.is_authenticated %}
<a class="text" >Your Description is: , {{bio}}</a>
<img src= {{userinfo.picture}} />
{% endif %}
</div>
Before implementing the JSON, the bio managed to display. I believe something must be done in the HTML to get it to display and need some help. The picture when displaying on my page does not register but when debugging it is clear that 'picture' is picture file link. The picture on the page never shows up.
I have tried to figure out displaying the bio and picture as they have been correctly passed into the models. There is a django load static line at the top of my HTML file page as well.
Edit:
Everything looks normal in this picture yet it is still not displaying?
Put {{userinfo.picture}} in double quotes
<img src="{{userinfo.picture}}" />