CODEWITHSUNDEEP
pythongoogle-app-engine
user3211229
user3211229

Reputation: 111

GAE python display multiple images in on page

I'm trying to display multiple images (pulled from datastore) in one page.

Doing this only displays 1 image...

class Stocks(db.Model):
   ticker = db.StringProperty()
   picture = db.BlobProperty(default=None)

What i use to serve:

self.response.headers['Content-Type'] = 'image/jpeg'
self.response.out.write(stock.picture)

Is this the only way i can server the picture? Can i do it in a way where i do multiple image response outs? Something along the lines like this.

 self.response.out.write('<img src=' + stock.picture + '>')

UPDATE: Thanks for the reply. Totally didn't know you could do something like that.

So i did this:

app = webapp2.WSGIApplication([('/dailystocks', frontend_dailyStocks),('/image/.*', ServeImage),('/mainPage', MainPage)], debug=True)

Then this:

class MainPage(webapp2.RequestHandler):
  def get(self):
    images = Stocks.all().fetch(100)
    html = ['<img src="/image/%s" />' % img.key() for img in images]
    self.response.out.write(html)    

class ServeImage(webapp2.RequestHandler):
  def get(self):
    key = self.request.get('key')
    image = Stocks.get(key)
    if image:
        self.response.headers['Content-Type'] = 'image/jpeg'
        self.response.out.write(image.picture)
    else:
        self.abort(404)

The thing loaded but it showed a list of broken image links.

This is an example image link:

    http://*****.appspot.com/image/ag9zfmpwZ2V0bGlzdGluZ3NyEwsSBlN0b2NrcxiAgICAwOGGCAw

Upvotes: 0

Views: 191

Answers (1)

Gwyn Howell
Gwyn Howell

Reputation: 5424

For each picture you want to serve, you'll need a separate HTTP call. So you may write a handler to serve an image, much like you suggested, as follows:

class ServeImage(webapp2.RequestHandler):
  def get(self):
    key = self.request.get('key')
    image = Stocks.get(key)
    if image:
      self.response.headers['Content-Type'] = 'image/jpeg'
      self.response.out.write(image.picture)
    else:
      self.abort(404)

Then in your main handler, load the images and render the html, referencing the ServeImage handler in each img tag ...

class MainPage(webapp2.RequestHandler):
  def get(self):
    images = Stocks.all().fetch(100)
    html = ['<img src="/image?key=%s" />' % img.key() for img in images]
    self.response.out.write(html)

You'll need to route the url /image to your ServeImage handler.

Upvotes: 4

Related Questions