How to get image with servlet and display it using GWT Image class?

Question

I'm using the following code as part of the GWT server-side class (servlet) for GWT-RPC.

private void getImage() {
        HttpServletResponse res = this.getThreadLocalResponse();
        try {
            // Set content type
            res.setContentType("image/png");

            // Set content size
            File file = new File("C:\\Documents and Settings\\User\\image.png");
            res.setContentLength((int) file.length());

            // Open the file and output streams
            FileInputStream in = new FileInputStream(file);
            OutputStream out = res.getOutputStream();

            // Copy the contents of the file to the output stream
            byte[] buf = new byte[1024];
            int count = 0;
            while ((count = in.read(buf)) >= 0) {
                out.write(buf, 0, count);
            }
            in.close();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

The servlet is running when i press a button on the client. I want to use the Image class to load the image into the client but i do not know how to get the url of the image from the servlet to the client's code in order to display it. Is this correct procedure or there is another way? I use GWT for the client and GWT-RPC for client-server communication.

Breakable

Answer 1

Servlets respond to varios HTTP methods: GET, POST, PUT, HEAD. Since you use GWT's new Image(url), and it uses GET, you need to have a servlet that handles GET method.

In order for servlet to handle GET method it must override a doGet(..) method of HttpServlet.

public class ImageServlet extends HttpServlet {

    public void doGet(HttpServletRequest req, HttpServletResponse resp) 
      throws IOException {

        //your image servlet code here
        resp.setContentType("image/jpeg");

        // Set content size
        File file = new File("path/to/image.jpg");
        resp.setContentLength((int)file.length());

        // Open the file and output streams
        FileInputStream in = new FileInputStream(file);
        OutputStream out = resp.getOutputStream();

        // Copy the contents of the file to the output stream
        byte[] buf = new byte[1024];
        int count = 0;
        while ((count = in.read(buf)) >= 0) {
            out.write(buf, 0, count);
        }
        in.close();
        out.close();
    }
}

Then you must configure path to your servlet in your web.xml file:

<servlet>
    <servlet-name>MyImageServlet</servlet-name>
    <servlet-class>com.yourpackage.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>MyImageServlet</servlet-name>
    <url-pattern>/images</url-pattern>
</servlet-mapping>

Then call it in GWT: new Image("http:yourhost.com/images")

Bezoar

what if i have a set of images, can they be displayed by a single servlet like in your example? – Breakable

yes, you need to pass a paramater to the servlet: /images?name=something – Bezoar

Then you can get parameter in servlet by String param = req.getParameter("name") – Bezoar

To clear this a bit: you can only serve one image per request. – Bezoar

so to display several images alltogether several request must be made (if you want to display all the images of a folder) – Breakable

Yes with this approach. There is possibility with creating Image Sprites, but it's rather complicated. – Bezoar