How to display an image from blobstore?

Question

I am trying to understand the documentation Using the Images Python API and I am confused about how to get the key and display the avatar.

Documentation says that the Image handler will serve the image off the /img path.

I am confused about what this Image handler does. I comment below how understand it; please correct. Thanks:

class Image (webapp.RequestHandler):
    def get(self):
        #get the key of the image "img_id" from datastore
        #what is the value of "img_id"? Where does it come from?
        #how does the app engine know to get what key for which image?
        greeting = db.get(self.request.get("img_id"))
        #what is greeting.avatar?
        #is it img_id.avatar ?
        #I assume "avatar" refers to the "avatar" property in the model
        if greeting.avatar:
            self.response.headers['Content-Type'] = "image/png"
            #does this display the avatar?
            #I thought the img tag displayed the avatar
            self.response.out.write(greeting.avatar)
       else:
          self.error(404)

Many thanks for your help.

---

UPDATE (re: answer by Gabi Purcaru)

Thanks again for the clear answer. I have a query that displays the user comments like this:

    for result in results:
        self.response.out.write("<li>")
        self.response.out.write("<b>%s</b> %s " % (result.userName, result.userLatestComment))
        self.response.out.write("</li>")
    self.response.out.write("</ol></body></html>")

so, I copy the line with the image tag from the MainPage handler

self.response.out.write("<div><img src='img?img_id=%s'></img>" % greeting.key())

and change

greeting.key()

to

result.key()

I assume that, this should now display the avatar next to the user comment:

    for result in results:
        self.response.out.write("<li>")
        self.response.out.write("<b>%s</b> %s " % (result.userName, result.userLatestComment))
        self.response.out.write("<div><img src='img?img_id=%s'></img>" % result.key())
        self.response.out.write("</li>")
    self.response.out.write("</ol></body></html>")

but still not clear why result.key() is the key of the image I want to display?

Answer 1

1. "img_id" comes from the GET part of the url (something like "www.example.com/img?img_id=12312"). The engine assigns a new unique key for every model in the database.

2. greeting.avatar is the avatar property of the model with the key img_id. So, in some sense, you can think of it like img_id.avatar, although technically it is not correct.

3. that does not display the avatar, it is just returning the avatar. Let's take a usual image for example for you to understand better. When you write <img src="some_link" />, the browser will look for "some_link", and include that image. The browser will then read the image from the filesystem, and return it to the browser. What your handler does is changing the backend part, so that the webserver will return the image from the datastore (specifically that avatar property) instead of a regular file. The browser -- and the user -- will see it as a regular image.

EDIT: result.key() is the unique identifier that the database automatically gave your model. You need to "tell it" to the image handler you just wrote, for it to know which particular model avatar you need. You do that by setting the img_id GET variable for the url (which you just did).

I am not sure if you understand the whole .key() thing. Let me explain that:

Any database needs to identify one record from another (model in our case). This is why they will automatically assign a new, and most importantly unique identifier (key in our case) to each and every record inserted in the database. You will have to provide the model's key for your handler to return the avatar of that model.

Let's take a real-world example: you are an individual amongst many. The way that your country uniquely identifies you is by some kind of SSN (Social Security Number). In my country it is a 13-digits code (e.g. 1024582485008). If I want to get my driver licence, I will have to provide my name, but that is not enough -- I'm not the only Gabi Purcaru in my country. I will also have to provide my SSN, which will tell exactly who I am. If we make an analogy, you have to provide the model's "SSN" (i.e. key) to the handler, so that it will know which model to get from the database and return it's avatar.