Displaying image from byte array in browser

First, make sure your GIF file is not corrupted. (Happened to me before, too).

If that is the case, try this code for sending the GIF file:

byte[] fileByte = Files.readAllBytes(filePath);
writer.writeBytes("HTTP/1.1 200 OK\r\n");
writer.writeBytes("Content-Type: image/gif\r\n");
writer.writeBytes("Content-Length: "+fileByte.length+"\r\n");
writer.writeBytes("\r\n");
writer.write(fileByte, 0, fileByte.length);

And then try to navigate to "house.gif" directly instead of "myHome.htm". Let me know in the comments what this does.

Previous answer attempts:

I think I may have misunderstood your question. Let me try with a different answer:

You are not sure how to figure out on the server when to return the HTML file myHome.htm and when to return house.gif?

I think for this you need to simply parse out the requested URL. Just check whether it contains "house.gif" or not. Then, depending on this, you either return the HTML file as you described above, or you send the .gif file, making sure that you use

writer.write(fileByte, 0, fileByte.length);

to send the binary data and that you set a reply header of

Content-Type: image/gif

In both cases (for the HTML file and the GIF file), though, you should prepend the data you are sending with correct HTTP response headers. Don't take the page-title the wrong way, but this site might help: http://net.tutsplus.com/tutorials/other/http-headers-for-dummies/

And just to make sure: Your server will be receiving TWO independent requests. The first one will ask for the HTML file, the second one will ask for the GIF file. So you send either one or the other. So, there's no "special way" to send the GIF instead of the HTML file. You use the same clientSocket. But it's a different connection.

Previous answer(s):

I think you might be missing the mime-type of your returned data. Try adding the following HTTP header to your reply:

Content-Type: image/gif

Actually... Are you sending a correct HTTP reply at all (including headers, specifically Content-Length)? If not, shoot me a comment and I'll post the code that you need for this.

If, for some reason, you cannot set the content-type header to let the browser know that you are sending it an image, you might be able to load the binary data on the client with an XMLHttpRequest into a JavaScript function rather than specifying it as the source Url of an img tag. Then you can use JavaScript to encode the binary data into a dataURI (http://en.wikipedia.org/wiki/Data_URI_scheme) with the correct mime type and set that as the source of the image.

Actually, I just noticed something in your code:

new String(fileByte)

might interpret the fileBytes as unicode characters rather than binary. Then, when you write this to the writer, it might screw it up as probably not all data in the image are valid unicode. Try replacing the line with this:

writer.write(fileByte, 0, fileByte.length);

Maybe this is all you need to do to fix it???