Image which is stored as a blob in Datastore in a html page

Question

I am trying to make a Web Application based on Google App Engine in python. A part of it deals with displaying the poster of Movie hosted at IMDb. I have the link to the poster. For ex. http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1._SX94_SY140_.jpg

Then I tried to put it in an HTML page as:

<a href="https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg">
<img src="https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg">
</a>

See the example here :

The image isn;t shown and on clicking it, a page opens saying:

Referral Denied

You don't have permission to access "https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg" on this server.

Reference #24.84d81002.1393249598.981ca7

On going through this question, I came to know that IMDb does not allow referrals to any other sites. The solution was to get the image yourself, save it and then serve it yourself. For doing that, I followed this link.

I made a datastore object storing various informations of the movie as well as the poster which was fetched using urlfetch api. relevant parts of the code are

from google.appengine.ext import db
from google.appengine.api import urlfetch

class Movie(db.Model):
    title = db.StringProperty()
    poster = db.BlobProperty(default=None)

coverurl = "https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg"
movie = Movie()
posterimg = urlfetch.fetch(coverurl).content
movie.cover = db.Blob(posterimg)
movie.put()

Now, for rendering the html page, I got the movie object from datastore as

m = Movie.gql("WHERE title = :1", title).get()
img = m.posterimg

and the html page was rendered as

imghtml = ' <img src="' + img + '"> </a>'

An error was expected and was recieved as:

UnicodeDecodeError: 'ascii' codec can't decode byte 0xff in position 0: ordinal not in range(128)

What is the way out of this? How can I include an Image which is stored as a blob in Datastore in a html image?

Answer 1

upload image to blobstore using the app engine helpers, get the serving_url in the same handler, save the serving_url with your image object, refer to the image url in your html template

e.g.

from google.appengine.ext.webapp import blobstore_handlers
from google.appengine.api.images import get_serving_url

class Handler(blobstore_handlers.BlobstoreUploadHandler):
    def post(self):
        upload_files = self.get_uploads('file')
        blob_info = upload_files[0]
        img = MyImageObject()
        img.image_name = blob_info.filename
        img.image_url = get_serving_url(blob_info.key())
        img.put()

then in the template

<img src="{{img.image_url}}">

to get original size of image you will need to append =s0 to end of url, append =sXX to resize, see "URL Modifications" section here https://developers.google.com/appengine/docs/python/images/functions

Answer 2

The serving dynamic images is an old link. Today we have Google High Performance Image serving. How to use this:

1. Upload an image to the blobstore
2. Using the App engine image service, get a serving url:
3. Put his serving url in your HTML

example: serving_url = images.get_serving_url(blob_key, size=None, secure_url=True)

Docs: https://developers.google.com/appengine/docs/python/blobstore/#Python_Uploading_a_blob

Example serving url: https://lh6.ggpht.com/lOghqU2JrYk8M-Aoio8WjMM6mstgZcTP0VzJk79HteVLhnwZy0kqbgVGQZYP8YsoqVNzsu0EBysX16qMJe7H2BsOAr4j=s70

Answer 3

Try this

echo '<img src="data:image/jpeg;base64,' . base64_encode( $row['imageContent'] ) . '" />';