Click here to Skip to main content
15,867,997 members
Articles / Web Development
Tip/Trick

How to display images from the database in your JSP pages - the easy way

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
25 Sep 2011CPOL1 min read 62.2K   4   1
The easiest and elegant way to read images from the database and display them in the UI.

This is a Java only tip.


The easiest and elegant way to read images from the database and display them in the UI is through a servlet that handles the image processing for you. I'll present below a sample that displays a user avatar in a JSP page. This sample uses Spring 3 and the tip from this article to inject a spring bean into this servlet. This example can easily be adapted to many kinds of situations. Here is the code:


The servlet


Java
package insidecoding.servlet;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.HttpRequestHandler;

import insidecoding.service.UserService;

@Component("imageServlet")
public class ImageServlet implements HttpRequestHandler {

    @Autowired
    private UserService UserService;

    @Override
    public void handleRequest(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // get the thumb from the user entity
        byte[] thumb = userService.getCurrentUserAvatar();

        String name = "userAvatar";
        response.setContentType("image/jpeg");
        response.setContentLength(thumb.length);

        response.setHeader("Content-Disposition", "inline; filename=\"" + name
                + "\"");

        BufferedInputStream input = null;
        BufferedOutputStream output = null;

        try {
            input = new BufferedInputStream(new ByteArrayInputStream(thumb));
            output = new BufferedOutputStream(response.getOutputStream());
            byte[] buffer = new byte[8192];
            int length;
            while ((length = input.read(buffer)) > 0) {
                output.write(buffer, 0, length);
            }
        } catch (IOException e) {
            System.out.println("There are errors in reading/writing image stream "
                    + e.getMessage());
        } finally {
            if (output != null)
                try {
                    output.close();
                } catch (IOException ignore) {
                }
            if (input != null)
                try {
                    input.close();
                } catch (IOException ignore) {
                }
        }

    }
}

Map this servlet to the /image path in web.xml


XML
<servlet>
    <servlet-name>imageServlet</servlet-name>
    <servlet-class>org.springframework.web.context.support.HttpRequestHandlerServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>imageServlet</servlet-name>
    <url-pattern>/image/*</url-pattern>
</servlet-mapping>

Usage in JSP


HTML
....
<img src="image/avatar" height="75px" width="75px" align="left" />
....

The code is pretty self-explanatory:



  • get the byte[] array from the database
  • wrap it with an InputStream
  • write the data from the InputStream to the servlet output stream in chunks

This code version supposes that you want to display the avatar of the current logged user. But this servlet can be used with any type of situation. For example, if you want to display images by the image ID, you can do this:


HTML
....
<img src="image/1212" height="75px" width="75px" align="left" />
....

where 1212 is the image ID. You can then grab this image ID in the servlet, get the corresponding byte[] from the database, and continue as in the above code.


Nice, elegant, and easy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Endava Ltd.
Romania Romania
My name is Madalin Ilie. Currently I'm a Development Lead at Endava Romania (www.endava.com).

Comments and Discussions

 
GeneralReason for my vote of 5 very good and easy Pin
Satya18226-Sep-11 22:31
Satya18226-Sep-11 22:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.