Retrieve image to display from google datastore

Question

models.py

class Badge(db.Model):
user = db.ReferenceProperty(User, collection_name='user_badges')
skill = db.ReferenceProperty(Skill, collection_name='skill_badges')
points = db.FloatProperty(required=True)

class Skill(db.Model):
skill_id = db.StringProperty()
name = db.StringProperty()
description = db.StringProperty()
picture = db.BlobProperty(default=None)

class User(db.Model):
user_id = db.StringProperty(required=True)
nickname = db.StringProperty(required=False)
email = db.StringProperty(required=False)

views.py

user = common.get_user(request)
if not user:
    return auth_error(common.getHostURI(request), request)

html

{% for badge in user.user_badges %}
  {{ badge.skill.picture }}                            
{% endfor %}

An example of a datastore entry of picture is:

3601 bytes, SHA-1 = b0a110a823d936d97dba83d5c8b32c7a078d3ac4

How do i retrieve this image out of the datastore> if i use badge.skill.picture, it returns me empty.

EDIT: This does not work:

return render_to_response(template_name, locals(), context_instance=RequestContext(request, params), mimetype="image/png")

Adam Crossland · Accepted Answer · 2011-03-16T20:09:06.147

4

You can't embed a picture directly into a template; HTML does not work that way. You will need to embed an <img> tag with a src attribute that gives a URL that your application will answer to serve the URL. I only use the Templates part of Django, so if you are using the full-stack, you will have to translate some of these ideas, and I can't help much with that.

Your Django template would look something like this:

{% for badge in user.user_badges %}
  <img src="/skill/get_picture/{{ badge.skill.key }}">                            
{% endfor %}

And you will need to have a Route that handles /skill/get_picture/:id. The controller code that is called to handle this route will look something like this:

from google.appengine.ext import db
from models import Skill

requested_skill = db.get(id) # id comes from the :id param in the URL
return HttpResponse(requested_skill.picture, mimetype="image/png")

I think that returning an HttpResponse with the content of the image may do what you want. You definitely do not want to return another template; you want to return the image's data and that's all.

edited Mar 16 '11 at 20:09

answered Mar 16 '11 at 18:02

Adam Crossland

14,198
3
44
54

Here's a sample: http://code.google.com/appengine/articles/python/serving_dynamic_images.html – Calvin Mar 16 '11 at 18:06
return render_to_response(template_name, locals(), context_instance=RequestContext(request, params), mimetype="image/png") I tried this, but it doesnt work. how to i incorporate the content type to my views.py (django)? – Lynn Chang Mar 16 '11 at 18:35
@Lynn: I can't really make sense out of the code in your comment, so I am going to edit it into your question on your behalf, OK? – Adam Crossland Mar 16 '11 at 19:43
@Lynn: I don't know enough about Django -- aside from the template langauge -- to know how to make this work in Django, but I'll elaborate my answers to see if I can be of more help. – Adam Crossland Mar 16 '11 at 19:47
This should work out of the box, just make sure you add the image to you route handlers as @adam suggests. (r'^skill/get_picture/([^\.^/]+)$', views.get_skill_picture), – jonmiddleton Mar 16 '11 at 21:51

score 0 · Answer 2 · answered Mar 16 '11 at 18:09

0

I agree with Adam Crossland's method for the most situations, but if the image is small enough (<128k in most browsers, smaller in IE), you could serve it using the Data URI scheme.

http://en.wikipedia.org/wiki/Data_URI_scheme

Basically a Base64 encoding of your image data, with a small amount of info to tell the browser what to do with the data.

answered Mar 16 '11 at 18:09

Calvin

4,177
1
16
17

Data URIs are sweet as hell, but they aren't handled by all browsers. – Adam Crossland Mar 16 '11 at 19:42
True, but my philosophy is: "People with old browsers can just go back to the AOL homepage if they don't like it." – Calvin Mar 16 '11 at 19:58
Awesome PROTIP. I'm going to use that one on my project manager. :) – Adam Crossland Mar 16 '11 at 20:09
1

128k is a bit of a high upper limit - it would make the encoded image larger than the rest of most typical HTML pages. – Nick Johnson Mar 16 '11 at 21:09

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

I think this post will help you a lot store-jpg-gif-png-etc-it-gae-datastore

edited May 23 '17 at 12:09

Community

1
1

answered Mar 17 '11 at 05:04

Abdul Kader

5,781
4
22
40

Retrieve image to display from google datastore

3 Answers3