Skip to page content Skip to main navigation
English | Site Directory

e.g. "templates" or "datastore"

# Serving Dynamic Images with Google App Engine

Austin Chau, Google Developer Programs
April 2008

## Introduction

A picture is worth a thousand words. This is definitely true with today's web applications where images play a big part in reaching the audience. Google App Engine allows you to store and serve images quickly and easily through its datastore. The Python interface includes a data modeling API and GQL, our very own query language. In this short article, I will walk you through how to use the Datastore API to store and serve images, using code from the Movie Review sample application as an example.

## Storing Images in the Datastore

For starters, we would like to store each movie in the application as an object of the datastore. This is accomplished by defining a class that models a movie. The Movie class below defines all the attributes a Movie object would have. One of the defined attributes is "picture", which represents the binary data of a jpeg image for that movie. To handle the images properly, we must store them as Blobs, therefore we need to declare the picture as a BlobProperty.

    Class Movie(db.Model)
      title = db.StringProperty()
      picture = db.BlobProperty(default=None)
      ...

Now that we have the model defined, we can start using it to store movie objects. We can get movie data from a remote source and feed it into the application. To do this, use the Google App Engine's URL Fetch API which retrieves data from both HTTP and HTTPS URLs. The urlfetch.Fetch() method can be used to fetch the binary content of a remote image. We simply need to supply the URL of the image as the argument.

Next, create a Blob object by passing the content attribute of the fetched result (a string representation of the binary image) as the argument and assign it to the picture attribute of a Movie object. The `put()` method is then called to commit the change to the datastore.

    movie = Movie()
    ...
    movie.picture = db.Blob(urlfetch.Fetch(picture_url).content)
    movie.put()

## Retrieving & Displaying Images

Now that the objects are populated in our Movie datastore, let's set up a request handler to retrieve them dynamically from the datastore and render the objects back to the browser as images.

First, we create a GetImage class to define the GET request handler. The first thing the request handler does is retrieve the value of 'title' from the URL parameter. Then it retrieves the Movie object that matches the title from the datastore by calling the `getMovie()` method.

Once we have the reference to the Movie object, we can access its "picture" attribute. In order for the browser to properly render the image, we set the `HTTP Content-Type` header as `'image/jpeg'`.

    class GetImage(webapp.RequestHandler):
      def get(self):
        title = self.request.get('title')
        movie = getMovie(title)
        if (movie and movie.picture):
          self.response.headers['Content-Type'] = 'image/jpeg'
          self.response.out.write(movie.picture)
        else:
          self.redirect('/static/noimage.jpg')

The `getMovie()` method contains a simple GQL query that retrieves a movie object that matches the title.

    def getMovie(title):
      result = db.GqlQuery("SELECT * FROM Movie WHERE title = :1 LIMIT 1",
                           title).fetch(1)
      if (len(result) > 0):
        return result[0]
      else:
        return None

To make it easy to access the images of the movies in the application, we can map the `GetImage` class to the URL path `'/image'`. Here, we have chosen to use the webapp module to handle the `GET` request:

    apps_binding = []
    ...
    apps_binding.append(('/image', GetImage))
    application = webapp.WSGIApplication(apps_binding, debug=True)
    wsgiref.handlers.CGIHandler().run(application)

Now when a visitor visits the URL - http://mydomain.com/image?title=matrix, an image for the movie "matrix" is returned to the browser.

## Resources

We have just shown you how you can easily serve images from your Google App Engine's datastore. Now it's time for you to get your hands dirty with code! Check out the resources below to get started on building your next great app:

- Complete source code of the Movie Review App
- Datastore API Reference
- Google App Engine Developer's Forum