You can only send one response at a time, but you are trying to send back two responses smashed together (one blob of text and one image):

    print "Content-type: text/plain\n\n";
    print p( "A OK" );
    print "Content-type: image/png\n\n";
[download]

Only the first header is interpreted as a valid header, and hence the browser thinks it is seeing one big text response.

What you must do is send back one response per request. The trick is to set the src attribute of your first response's IMG element in such a way as to cause the client's browser to call your CGI back and ask for the image.

This is the idea:

1. The client's web browser requests your page.
2. Your CGI receives request and sends back a text/html response. The HTML includes an IMG element whose src attribute points back to your CGI and passes in an "I want the image" parameter.
3. The client's browser receives your response, parses the HTML, and then tries to load the image. In doing so, it calls your CGI again (the src attribute points to it), asking for the image.
4. Your CGI checks the request parameters and notices the "I want an image" parameter. The CGI then generates the image and sends back an image/png (or whatever type is appropriate) response.
5. The client receives the image and finishes rendering the page.
6. It's happy time. Dance.

For a complete example that uses this technique, see the script referenced at the end of The Mobile Weather Problem and its solution on my site.

Cheers,
Tom