Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

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

, 25 Sep 2011
Rate this:
Please Sign up or sign in to vote.
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

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

<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

....
<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:

....
<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)

Share

About the Author

ludovicianul
Technical Lead Endava Ltd.
Romania Romania
My name is Madalin Ilie. Currently I'm a Development Lead at Endava Romania (www.endava.com).
Follow on   Twitter

Comments and Discussions

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

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 25 Sep 2011
Article Copyright 2011 by ludovicianul
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid