Converting BLOB, stored on a database, to an image on an HTML website

Question

This is my first question.

I am having users upload their own image to a database. That image is stored as a BLOB.

I was able to do this successfully. I am using MySQL for the database.

The part I am having trouble with is displaying that BLOB as an image on the website when its called upon.

Right now only the Binary data, lots of weird symbols are being displayed. I think its a problem with the HTTP header. Right now its in :

print "Content-Type: text/html"

I've tried:

print "Content-Type: image/jpeg"

I am using Python to connect with the database and write the HTML.

Edit: Code:

def showFile():

    # do SQL to retrieve blob where filename
    conn, cursor = getConnectionAndCursor()
    sql = """
    select data
    from upload 
    where id=1
    """
    cursor.execute(sql)
    data = cursor.fetchone()
    blob = data[0]

    print "<hr>"
    print "This is what I'm trying"
    print """<img  src="data:image/jpeg;base64,%s/>""" % data

######################################################################
if __name__ == "__main__":

    form = cgi.FieldStorage()

    if "show_file" in form:
        print "Content-Type: text/html"
        print 
        printHeaders("Image upload example")
        showFile()
        printFooter()

Aerothermodynamics

Any reason why you can't just store file paths to the image in the database? #4248 – Killam

You'll need to include more of the code from the script you're using. – Kicksorter

Answer 1

image is stored in database in binary format so once it comes to server using decode function to get it back to image

image.decode('base64')

this will convert your blob to image

Viens

I gave this a try and decoding didn't work, but when I retrieved the BLOB from the database encoding it to base 64 and using the HTML that Reptilcus suggested work. Thank You – Aerothermodynamics

Answer 2

Depending on how its encoded, you can also possibly just use a Data URI for the image. Something like this might work if they are encoded as base64 PNGs.

<img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

As @Alok says, you might need to first convert it from binary blob to base64, then use the Data URI.

Readability

I tried what Alok suggested, but when I retrieved the BLOB from the database encoding it to base 64 and using the HTML you suggested work. Thank You – Aerothermodynamics

Cool, if it worked then please upvote this answer so that others will be able to use it if they have the same problem. – Readability

Answer 3

Well, you can either return an HTML response, and use a combination of the existing answers, or you can just return an image/jpeg response, and dump the BLOB directly to stdout, with something like this...

def showFile():

    # do SQL to retrieve blob where filename
    conn, cursor = getConnectionAndCursor()
    sql = """
    select data
    from upload 
    where id=1
    """
    cursor.execute(sql)
    data = cursor.fetchone()
    blob = data[0]

    print blob

if __name__ == "__main__":

    form = cgi.FieldStorage()

    if "show_file" in form:
        print "Content-Type: image/jpeg"
        print 
        showFile()

...but it depends on what you're trying to achieve.

Kicksorter

Answer 4

It depends what you need to accomplish.

1. Single image on the HTML page.

   1.1 Best approach is to use it with Content-Type: image/jpeg (if it's jpeg)

   import sys
   
   def showFile(blob):
       print "Content-Type: image/jpeg\r\n"
       sys.stdout.flush()
       print sys.stdout.buffer.write(image)
   
   def getFile():
       conn, cursor = getConnectionAndCursor()
       sql = 
       """
           select data
           from upload 
           where id=1
       """
       cursor.execute(sql)
       data = cursor.fetchone()
       blob = data[0]
   
       return blob
   
   if __name__ == "__main__":
   
       form = cgi.FieldStorage()
   
       if "show_file" in form: 
           image = getFile()
           showFile(image)
   

   Why is the best approach? Because you can use requested url that triggers this script as source of an image tag in html file

2. Multiple images on one html page.

   2.1 Convert blob in base64

    import base64
   
    blob = base64.b64encode(blob).decode('utf-8')
    # You need to decode it to get pure string and use it later in <img>
   

   After you converted it you can place it.

    print(f"<img src="data:image/jpeg;base64,{blob}>")
   

Notes: I am using python3.8 for the second example. I am assuming you are using cgi module.

Dermatophyte