Python cgi print image to html

Question

How to print a png image to html?

I have:

print("Content-Type: image/png\n")
print(open('image.png', 'rb').read())

And it prints that:

Content-Type: image/png
b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x0 ...

That answer didn't help me. I have this:

Content-Type: image/png �PNG  IHDR�X��%sBIT|d�  pHYsaa�?�i IDAT...

HTTP Server:

from http.server import HTTPServer, CGIHTTPRequestHandler
server_address = ("", 8000)
httpd = HTTPServer(server_address, CGIHTTPRequestHandler)
httpd.serve_forever()

you need empty line between headers and data - so you need two `\n`. And you may need header with data size/length. — furas, Nov 06 '16 at 15:06
Now I see. `print` convert bytes into string but you have to send pure/original bytes without prefix `b""`. — furas, Nov 06 '16 at 15:10
see http://stackoverflow.com/questions/18791004/output-binary-data-from-cgi-in-python-3a — furas, Nov 06 '16 at 15:14
@furas That didn't help either. I have now: `Content-Type: image/png �PNG IHDR�X��%sBIT|d� pHYsaa�?�i IDATx� ...` — Alexandra, Nov 06 '16 at 15:22
For you it looks strange but for browser it can be correct data. Did you try it in browser ? — furas, Nov 06 '16 at 15:23
if you use `Python3` then you should use try `python3 -m http.server --cgi 8000` — furas, Nov 06 '16 at 15:36
@furas I have something on this page already, everything works except images. I use `from http.server import HTTPServer, CGIHTTPRequestHandler server_address = ("", 8000) httpd = HTTPServer(server_address, CGIHTTPRequestHandler) httpd.serve_forever()` — Alexandra, Nov 06 '16 at 15:40
I'm not sure if we not go in wrong direction. This server can serve images directly - ie. in browser try `localhost:8000/image.png` - so you don't have to create all this code with `"Content-Type"`. If you want to see image in HTML then you have to use HTML tag ``. Code with `"Content-Type"` is usefull if you need to serve dinamically created images. — furas, Nov 06 '16 at 16:11
@furas This `print("")` works. Previously I was trying without `/`. Thanks a lot. — Alexandra, Nov 06 '16 at 16:31
I created extended version: [Simple CGI Server with CGI scripts in different languages.](https://github.com/furas/my-python-codes/tree/master/CGI/simple-server-with-different-languages) — furas, Nov 06 '16 at 21:18

furas · Accepted Answer · 2021-11-22T20:39:54.670

EDIT: extended source code in Simple CGI Server with CGI scripts in different languages.

I have structure: (all code is at the end)

project
├── cgi-bin
│   └── image.py
├── image.png
├── index.html
└── server.py

and I run ./server.py (or python3 server.py)

CGI server can serve images without extra code. You can try

http://localhost:8000/image.png

Or put tag in HTML (ie. in index.html)

< img src="/image.png" >

and run

http://localhost:8000/index.html

If you need dynamically created image then create folder cgi-bin with script ie. image.py
(on Linux you have to set execution attribute chmod +x image.py)

And then you can run this script directly

http://localhost:8000/cgi-bin/image.py

or in HTML

< img src="/cgi-bin/image.py" >

server.py

#!/usr/bin/env python3

from http.server import HTTPServer, CGIHTTPRequestHandler

server_address = ("", 8000)

httpd = HTTPServer(server_address, CGIHTTPRequestHandler)
httpd.serve_forever()

cgi-bin/image.py

#!/usr/bin/env python3

import sys
import os

src =  "image.png"
length = os.stat(src).st_size

sys.stdout.write("Content-Type: image/png\n")
sys.stdout.write("Content-Length: " + str(length) + "\n")
sys.stdout.write("\n")
sys.stdout.flush()
sys.stdout.buffer.write(open(src, "rb").read())

index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8"/>
    <title>Index</title>
</head>

<body>
    <h1>image.png</h1>
    <img src="/image.png">
    
    <h1>cgi-bin/image.py</h1>
    <img src="/cgi-bin/image.py">    
</body>

</html>

image.png

Python cgi print image to html

1 Answers1