Output images to html using python

python html http-headers cgi

52,392

Solution 1

You can use this code to directly embed the image in your HTML: Python 3

import base64
data_uri = base64.b64encode(open('Graph.png', 'rb').read()).decode('utf-8')
img_tag = '<img src="data:image/png;base64,{0}">'.format(data_uri)
print(img_tag)

Python 2.7

data_uri = open('11.png', 'rb').read().encode('base64').replace('\n', '')
img_tag = '<img src="data:image/png;base64,{0}">'.format(data_uri)

print(img_tag)

Alternatively for Python <2.6:

data_uri = open('11.png', 'rb').read().encode('base64').replace('\n', '')
img_tag = '<img src="data:image/png;base64,%s">' % data_uri

print(img_tag)

Solution 2

Images in web pages are typically a second request to the server. The HTML page itself has no images in it, simply references to images like <img src='the_url_to_the_image'>. Then the browser makes a second request to the server, and gets the image data.

The only option you have to serve images and HTML together is to use a data: url in the img tag.

Solution 3

You can't just dump image data into HTML.

You need to either have the file served and link to it or embed the image encoded in base64.

52,392

Author by

Kilizo

Updated on June 19, 2020

Comments

Kilizo almost 4 years

I have a webpage generated from python that works as it should, using:

print 'Content-type: text/html\n\n'
print  ""                                 # blank line, end of headers
print '<link href="default.css" rel="stylesheet" type="text/css" />'
print "<html><head>"

I want to add images to this webpage, but when I do this:

sys.stdout.write( "Content-type: image/png\n\n" + file("11.png","rb").read() )
print 'Content-type: text/html\n\n'
print  ""                                 # blank line, end of headers
print '<link href="default.css" rel="stylesheet" type="text/css" />'
...

All I get is the image, then if I place the image code below my html/text header all I get is the text from the image, ie:

<Ï#·öÐÎ´ÝZºm]¾|‰k×®]žòåËÛ¶ÃgžyFK–,ÑôéÓU½zuIÒ}÷Ý§&MšH’V¯^?üð¼1±±±zýõ×%IñññÚºu«*W®¬wß}W.—K3gÎÔÌ™ÿw‹Ú””I’¹w¤¥hdÒd½q÷X•Šˆ²m¿þfïÞ½*]º´éÈs;¥¤¤Ø¿ILLÔˆ#rÊ

Also, if I try:

print "<img src='11.png'>"

I get a broken image in the browser, and browing directly to the image produces a 500 internal server error, with my apache log saying:

8)Exec format error: exec of './../../11.png' failed Premature end of script headers: 11.png

Kilizo over 12 years

<type 'exceptions.AttributeError'>: 'str' object has no attribute 'format' args = ("'str' object has no attribute 'format'",) message = "'str' object has no attribute 'format'"
Glider over 12 years

What python version are you on? Seems to be something below 2.6 as str.format was introduced there (docs.python.org/library/stdtypes.html#str.format) I added another way to format that should work on 2.5
Kilizo over 12 years

I am using 2.6.4, your second suggestion worked, it's the only solution that has so far, thanks, i'll give you the 'tick'! Any idea why i can't simply use "print '<img src=...>'" ?
David Heffernan over 12 years

you really should use a normal <img src=...>. Work out why it is failing.
Adriaan almost 5 years

Don't forget to add import base64 to the script for the Python version > 3 case.