That's not how HTTP works.

Your HTML and the image it references are two separate HTTP requests. Your script tries to answer both requests in one response. This approach will not work.

You need to wait for the image request and then send the image data. If you want/need to carry information from the page request to the image request, either use a cookie or pass the information in the image URL as a CGI parameter.

Technically, it could be one HTTP request. He could convert the image data to base64 and use a data uri. There's a URI::Data module that might be helpful in that regard.

Technically, it could be one HTTP request. He could convert the image data to base64 and use a data uri.

That won't work with all browsers. See http://caniuse.com/datauri. (Don't think that people have stopped using ancient IEs. And don't think that the browsers listed there are ALL browsers that exist.) Plus, it wastes a lot of bandwitdh, especially if the image is static. Using a classic HTTP(S) URL for the image allows the browser and all proxies between browser and server to cache the image, so it is transmitted only once, whereas the data URL "solution" sends the image for every request, with an additional overhead of 33% due to base64 encoding.

Alexander

--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)

Summary of info from the StackOverflow links below:

(a) Don't get confused with the difference between delivering an image and delivering an html file with an img tag on it. Keep in mind that when your browser is parsing an html file and it encounters an img tag, it takes the src url in the tag and makes an additional get request for it.

(b) Another way is to embed the image using the format.
This defeats browser caching and isn't great for very large images.

S/O links:
http://stackoverflow.com/questions/13851799/perl-cgi-display-image-to-browser-from-file
http://stackoverflow.com/questions/1207190/embedding-base64-images
http://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html

But in the modern world, there is another option, and that is much closer to your own solution, and that is to embed the PNG file into your HTML. For that, you have to base-64 encode your image file data, slap a content-type in a form of header on it and put that as the source of the <img> tag, using the data: protocol. The code could look like this:

use MIME::Base64;
printf '<img src="data:image/png;base64,%s">', encode_base64($image);
[download]

I would not recommend this for huge files, as it increases the transfer byte size by 33%, but for tiny images of a few k at most that is definitely a good alternative, since it limits the number of server requests.