How to retrieve series of images from mysql and display them in JSP

Question

I'm trying to build an array by fetching data from mysql. The array include text and pictures. So far everything went good but now I have no idea how to display these picture from the memolist on the JSP page. All I can see are just bunch of bytes. Let's see:

My DBQueries looks like this:

public static ArrayList<Memo> selectAllMemoList()
{
    DBConnectionPool pool = DBConnectionPool.getInstance();
    Connection connection = pool.getConnection();
    PreparedStatement ps = null;
    ResultSet rs = null;

    String query = "SELECT Users.picture, Users.username, Messages.subject, Messages.date, Messages.msg_id " +
            "FROM Messages, Users " +
            "WHERE Messages.uid_fk = Users.uid " +
            "ORDER BY date DESC";
    try
    {
      ps = connection.prepareStatement(query);
      rs = ps.executeQuery();

      ArrayList<Memo> memolist = new ArrayList<Memo>(); 

      String dbSqlTimestamp = "";

      while (rs.next()) {
         m.setUserpicture(rs.getString("picture"));
         m.setUsername(rs.getString("username"));
         m.setSubject(rs.getString("subject"));
         m.setDate(dbSqlTimestamp = new SimpleDateFormat("dd-MM-yy HH:mm").format(rs.getTimestamp("date")));
         m.setMessageid(rs.getInt("msg_id"));
         memolist.add(m);
      }

        return memolist;
    }
    catch (SQLException e){
        e.printStackTrace();
        return null;
    }        
    finally
    {
        DBUtil.closeResultSet(rs);
        DBUtil.closePreparedStatement(ps);
        pool.freeConnection(connection);
    }
}

My MemoShowAll looks like this:

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

    HttpSession session = request.getSession(); 

    ArrayList<Memo> memolist = DBQueries.selectAllMemoList();

    request.setAttribute("listmemo", memolist);

    String url = "/restricted/MemoList.jsp";

    // forward the request and response to the view
    RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(url);
    dispatcher.forward(request, response); 

}

MemoList.jsp

<z:rows>
    <core:forEach var="each" items="${listmemo}">
    <z:row>
        <img src="${each.userpicture}" border=0 >
        <z:label value="${each.username}"/>
        <z:label value="${each.subject}"/>
        <z:label value="${each.date}"/>
    </z:row>
    </core:forEach>
</z:rows>

Cheers, BB

what is stored in field userpicture ? image path ? and where the image is stored ? — Rahul Agrawal, Sep 24 '12 at 10:15

score 1 · Accepted Answer · edited May 23 '17 at 12:04

The way that i bypass this issue is by using a servlet to expose the image to the client. For this to work, you should store the image bytes retrieved from the database to the user's session object.

In the html i have < img src="/imageRender?id=someimageid"/ >

Therefore when the browser will try to render the image, it will make a call to /imageRender where my servlet listens to. And the servlet will read the input parameter and then render the image from the session object based on the parameter.

Some helpful links are:

1) Display servlet as img src using session attribute

2) Writing image to servlet response with best performance

Pay special attention to link 2 @BalusC answer to the place where it says In the ImageDAO#find() you can use ResultSet#getBinaryStream() to get the image as an InputStream from the database.

In your case you can create a List of DAO objects that will represent each row from db.

How to retrieve series of images from mysql and display them in JSP

1 Answers1