22

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
Mark Hall
  • 53,938
  • 9
  • 94
  • 111
Kilizo
  • 3,192
  • 4
  • 19
  • 20
  • Instead of showing us your print statements, show us the generated html file. – David Heffernan Sep 12 '11 at 15:02
  • What is the file/directory layout? It looks like Apache is trying to execute your 11.png as a CGI script. You normally store CGI scripts under `/cgi-bin`, and other resources elsewhere. Are you by any chance mixing them? – Helgi Sep 13 '11 at 14:13

3 Answers3

61

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)
Smart Manoj
  • 5,230
  • 4
  • 34
  • 59
Glider
  • 1,568
  • 12
  • 13
  • : 'str' object has no attribute 'format' args = ("'str' object has no attribute 'format'",) message = "'str' object has no attribute 'format'" – Kilizo Sep 12 '11 at 15:00
  • What python version are you on? Seems to be something below 2.6 as str.format was introduced there (http://docs.python.org/library/stdtypes.html#str.format) I added another way to format that should work on 2.5 – Glider Sep 12 '11 at 15:22
  • 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 ''" ? – Kilizo Sep 12 '11 at 15:31
  • 1
    you really should use a normal . Work out why it is failing. – David Heffernan Sep 12 '11 at 17:49
  • Don't forget to add `import base64` to the script for the Python version > 3 case. – Adriaan May 20 '19 at 09:15
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.

Ned Batchelder
  • 364,293
  • 75
  • 561
  • 662
0

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.

Acorn
  • 49,061
  • 27
  • 133
  • 172