How to display images on html page from python/jin

Question

I have created the class Blog in model.py and in that it has an attribute photo which is a BlobkeyProperty. My problem is how to diplay that photo on html page.. all I am getting is just key.I do not know much of Jinja and python so please help.. :)

{% if blog.photo == None %}
    <img src="static/css/img/photo.jpg" /><br/>
{% elif blog.photo %}
    <span>{{blog.photo.key.get()}}</span><br/>
{% endif %}

the first part is working but the else part is now giving me

Internal Server Error(UndefinedError: 'google.appengine.api.datastore_types.BlobKey object' has no attribute 'key')

If I remove the key.get() part then it is giving me the blobkey of that photo plese help..

Answer 1

This is what I do for handling images from blobstore.

1 Handler for serving images:

class AvatarDownloadHandler(BaseHandler):
    """
    Handler for Serve User's Avatar
    """

    def get(self):

        params = {}

        if self.request.get('id') != '':
            logging.info('loading image from id: %s' % self.request.get('id'))
            user_info = self.user_model.get_by_id(long(self.request.get('id')))
            if user_info != None:
                if user_info.picture:
                    self.response.headers['Content-Type'] = 'image/png'
                    self.response.out.write(user_info.picture)
                else:
                    self.response.headers['Content-Type'] = 'text/plain'
                    self.response.out.write('No image')
        else:
            self.response.headers['Content-Type'] = 'text/plain'
            self.response.out.write('No image ID')

Having this handler, then in Jinja/HTML side I just call the routing URL for download handler with the ID parameter, i.e.:

Given route:

RedirectRoute('/img/', handlers.AvatarDownloadHandler, name='img-download', strict_slash=True),

JINJA/HTML uses:

<img src="/img/?id=5671617594130432">

1 Handler for uploading images:

class AvatarUploadHandler(BaseHandler):
    """
    Handler for Edit User's Avatar
    """
    @user_required
    def post(self):
        """ Handles upload"""

        params = {}
        if not self.user:
            return self.render_template('home.html', **params)
        if not self.form.validate():
            message = _(messages.saving_error)
            self.add_message(message, 'danger')
            return self.redirect_to('edit-profile')
        picture = self.request.get('picture')
        user_info = self.user_model.get_by_id(long(self.user_id))
        if user_info != None:
            # Transform the image
            avatar = images.resize(picture, width=200, height=200, crop_to_fit=True, quality=100)
            user_info.picture = avatar
            user_info.put()
            message = _(messages.saving_success)
            self.add_message(message, 'success')
            self.redirect_to('edit-profile')

        message = _(messages.saving_error)
        self.add_message(message, 'danger')
        return self.redirect_to('edit-profile')


    @webapp2.cached_property
    def form(self):
        f = forms.AvatarForm(self)
        return f