Click here to Skip to main content
13,504,161 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 25 Sep 2011

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 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;

public class ImageServlet implements HttpRequestHandler {

    private UserService UserService;

    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.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 = > 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 {
                } catch (IOException ignore) {
            if (input != null)
                try {
                } catch (IOException ignore) {


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


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.


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


About the Author

Technical Lead Endava Ltd.
Romania Romania
My name is Madalin Ilie. Currently I'm a Development Lead at Endava Romania (

You may also be interested in...


Comments and Discussions

GeneralReason for my vote of 5 very good and easy Pin
Satya18226-Sep-11 22:31
memberSatya18226-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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180417.1 | Last Updated 25 Sep 2011
Article Copyright 2011 by ludovicianul
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid