Output images to html using python

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

Glider

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)

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.

You can't mix HTML and an image in the same document like that. Use the <img> tag to embed images in your HTML.

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.

来源：https://stackoverflow.com/questions/7389567/output-images-to-html-using-python

标签

python

html

http-headers

cgi