Image Servlet doesn't want to show image in browser (FireFox, IE..) but in Eclipse browser works?

Question

I have strange situation with my image servlet. It works well with Eclipse internal web browser, but won't to work with FireFox, InternetExplorer, Chrome, Opera....

Servlet code (below)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  File fl=new File("C:\\Documents and Settings\\Administrator\\My Documents\\Eclipse\\zadatak\\WebContent\\WEB-INF\\upload\\");
  PrintWriter pw=response.getWriter();
  response.setContentType("text/html");

  pw.println("<html>");
  pw.println("<head>");
  pw.println("<style type=\"text/css\">");
  pw.println("img{display:block-inline;width:100px;height:100px;");
  pw.println("</style>");
  pw.println("</head>");
  pw.println("<body>");
  pw.println("<table border=\"1\">");
  pw.println("<tr>");

  for(File f:fl.listFiles()){ 
      pw.println("<td>");
      pw.println("<img src=\"" + f.getPath() + "\">");
      pw.println("</td>");
  }   

  pw.println("</tr>");
  pw.println("</table>");
  pw.println("</body>");
  pw.println("</html>");

}

In Eclipse internal web browser looks like this (below)

PrintScreen of Eclipse internal web browser

Finally I found a solution for my problem. Thanks you all for helping me!

Now, this code works!

  ServletContext context=request.getServletContext();
  String path=context.getRealPath("upload");

  File fl=new File(path);
  PrintWriter pw=response.getWriter();
  response.setContentType("text/html");

  pw.println("<html>");
  pw.println("<head>");
  pw.println("<style type=\"text/css\">");
  pw.println("img{display:block-inline;width:100px;height:100px;");
  pw.println("</style>");
  pw.println("</head>");
  pw.println("<body>");
  pw.println("<table border=\"1\">");
  pw.println("<tr>");

  LinkedHashMap<Integer, String> hm=new LinkedHashMap<Integer,String>();
  int imageIndex=-1;
  for(File f:fl.listFiles()) {        
      if(f.getName()!=null){
          if(f.getName().endsWith(".bmp"))
              hm.put(++imageIndex, f.getName());
      }               
  }

  Iterator<String> pic=hm.values().iterator();

  while(pic.hasNext()){
      pw.println("<img src=\"upload/" + pic.next() + "\"/>");
  }


  pw.println("</tr>");
  pw.println("</table>");
  pw.println("</body>");
  pw.println("</html>");

class hierarchy in my project looks like

MyWebProject
 |-- src
 |    :
 |
 |-- web
 |    |-- META-INF
 |    |    `-- MANIFEST.MF
 |    |-- WEB-INF
 |    |    `-- web.xml
 |-- upload (the place where I keep pictures)
 :

Firefox now can correctly to show pictures

Firefox correctly shows page

You seem to be expecting that images are somehow inlined in HTML output. This isn't true. Images are requested and downloaded separately/individually based on the URL in the src attribute. — BalusC
By the way, having a folder named "upload" in the deploy space is also alarming. You should not store uploaded files in deploy folder for the very simple reason that they all get lost once you redeploy the WAR or even when you just restart the server, which in turn has the very simple reason that newly added files are not contained in the original WAR file. All with all, you're still going in completely the wrong direction in spite of my comment on your previous question on a related matter. — BalusC

JB Nizet JB Nizet · Accepted Answer · 2013-08-12T14:46:15

Think about what you're doing. There's a server, which has the images on its disk. And there's a browser, which will run on a different machine, potentially dozens of miles away from the server.

Your servlet sends the following to the browser:

<img src="C:\Documents and Settings\Administrator\My Documents\Eclipse\zadatak\WebContent\WEB-INF\upload\someIage.jpg"/>

This will only work if

the browser accepts to load images from the file system, although the HTML page is loaded with HTTP
the browser accepts to load files from the file system although the URL is incorrect (it should be file://...)
the client runs on Windows
the user happens to have a folder named C:\Documents and Settings\Administrator\My Documents\Eclipse\zadatak\WebContent\WEB-INF\upload\ on his machine
this folder happens to already contain all the images that the servlet sends

You should understand that this can't possibly work.

What you need is a servlet which loads an image from a file on the server, and sends the contents of this file to the HTTP servlet response (and doesn't forget to set the correct content type).

Once you have such a servlet (let's assume it is mapped to the URL /image and takes the ID of an image as parameter), the servlet you already have should generate the follwoing code:

for (String id: idsOfTheImageToDisplay){ 
  pw.println("<td>");
  pw.println("<img src=\"/image?" + id + "\"/>");
  pw.println("</td>");

}

Also, BMP is not a good format for the web, because it is not copressed and thus consumes a lot of bandwidth. You should transform your images to JPEG files, for example.

Image Servlet doesn't want to show image in browser (FireFox, IE..) but in Eclipse browser works?

1 Answers