Выводить изображения в html с помощью python

У меня есть веб-страница, созданная из python, которая работает так, как должна, используя:

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>"

Я хочу добавить изображения на эту страницу, но когда я это сделаю:

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" />'
...

Все, что я получаю, это изображение, тогда, если я помещаю код изображения под моим заголовком html/text, все, что я получаю, это текст с изображения, то есть:

<Ï#·öÐÎ´Ý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Ê

Кроме того, если я попытаюсь:

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

Я получаю сломанное изображение в браузере, и наведение на изображение приводит к ошибке внутреннего внутреннего сервера 500, при этом мой Apache-журнал говорит:

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

Ответ 1

Вы можете использовать этот код для непосредственного встраивания изображения в ваш HTML:

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)

Альтернативно для 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)

Для python> 3 заменить первую строку на

data_uri = base64.b64encode(open('Graph.png', 'rb').read()).decode('utf-8')

Ответ 2

Вы не можете смешивать HTML и изображение в том же документе. Используйте тег <img>, чтобы вставлять изображения в свой HTML.

Ответ 3

Изображения на веб-страницах обычно являются вторым запросом на сервер. Сама страница HTML не содержит изображений, просто ссылки на изображения типа <img src='the_url_to_the_image'>. Затем браузер делает второй запрос на сервер и получает данные изображения.

Единственным вариантом, с которым вы должны работать вместе с изображениями и HTML, является использование URL data: в теге img.

Ответ 4

Вы не можете просто копировать данные изображения в HTML.

Вам нужно либо предоставить файл, либо ссылку на него, либо вставить изображение, закодированное в base64.