How do I load an image, which was uploaded earlier ,onto a HTML file?

Question

So I set up profile pic upload as guided by http://www.tangowithdjango.com/book/chapters/login.html. Then I found the second answer(by user Raisins) to useful for my purpose and implemented it Extending the User model with custom fields in Django. As I've been that this answer is outdated, I've also tried the solution offered here for migration Get rid of get_profile() in a migration to Django 1.6 which hasn't improved my situation

Then in my views, I add required details including the image to a dictionary, and render i to the HTML page. It looks as though the UserProfile isn't returning the right object.

u=User.object.get(username__exact=request.user)
profile=UserProfile.objects.get(user=u)
global client
client['login']=True
client['name']=u.username
client['password']=u.password
client['email']=u.email
client['picture']=profile.picture
return render(request,'index.html',{'client':client})

And when I try to display the details on HTML page, everything except image is loaded. I tried

<img src="profile_images/{{client.picture}}">

where profile_images is in the root directory. I inspected the element and I find this

<img src="/static/profile_images/%7B%7B%20client.picture%20%7D%7D">

where I was expecting "1.jpg" instead of "%7B%7B%20client.picture%20%7D%7D".

Any help is appreciated. Thanks

Check this question: http://stackoverflow.com/questions/15175032/show-images-in-django-templates — ruddra, Jun 12 '14 at 05:52
The problem I'm facing is that {{client.picture.url}} or {{client.url}} isn't returning the right value — Nike, Jun 12 '14 at 11:33
picture = models.ImageField(upload_to='profile_images', blank=True) — Nike, Jun 12 '14 at 12:00

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

Raisin's answer is outdated. Please don't use AUTH_PROFILE_MODULE in Django 1.6 anymore. In fact, you don't even need to handle the post_save signal.

Based on the same tutorial, you will find the code for your view:

u = User.objects.get(username=request.user)

try:
    p = UserProfile.objects.get(user=u)
except:
    p = None

return render(request,'index.html',{'client':client, 'userprofile':p})

In your template use:

    {% if userprofile.picture %}
        <img src="{{ userprofile.picture.url }}"  />
    {% endif %}

edited May 23 '17 at 12:27

Community

1
1

answered Jun 12 '14 at 06:40

arocks

2,862
1
12
20

When my code runs 'userprofile'<--> p ends up being None. So it still doesn't work – Nike Jun 12 '14 at 06:58
With a little tweaking, 'user profile'<--> p is not None but now I can't even access details such as name or email which I could do before – Nike Jun 12 '14 at 07:23
That is expected if the user has not created a profile yet. Try to use the admin or django shell to create a profile for that user. – arocks Jun 12 '14 at 07:23
I am not sure if I understand the problem. You can access username in the template using {{ user.username }} – arocks Jun 12 '14 at 09:32
I have edited the question based on your help, but the original problem of image not loading persists. – Nike Jun 12 '14 at 11:32

score 0 · Answer 2 · answered Jun 12 '14 at 12:27

0

I solved my problem by using

{% load staticfiles %}
<img src="{% static client.picture %}"  />

answered Jun 12 '14 at 12:27

Nike

72
6

How do I load an image, which was uploaded earlier ,onto a HTML file?

2 Answers2