Display all images from Database (blob) on a jsp file in a table

Question

i need your help. I want to display all the images from my database (there are 6 images in there) on a jsp file. Why JSP File and not using outputreader? -> Cause i want to style the table with css in the next step so i have to do this on this special way.

Select all the pictures of the database:

public static List<Picture> displayPicture() {

List<Picture> list = new ArrayList<Picture>();

try {

    Class.forName("com.mysql.jdbc.Driver");

    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:9999/xxx", "xxx", "xxx");

    String sql = "SELECT * FROM PICTURES";

    PreparedStatement ps = conn.prepareStatement(sql);

    ResultSet rs = ps.executeQuery();

    while (rs.next()) {

         byte[] imageData = rs.getBytes("File_Data");
         String imageFileName = rs.getString("File_Name");

         Picture picture = new Picture();
         picture.setImageData(imageData);
         picture.setImageFileName(imageFileName);
         list.add(picture);
    }

} catch (Exception e) {
    e.printStackTrace();
}
return list;

Now i want to save this List in setAttribute to send it to the JSP-File:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Picture> list =null;
list = DBUtils.displayPicture();

request.setAttribute("pictureList", list);

RequestDispatcher dispatcher = request.getServletContext().getRequestDispatcher("/WEB-INF/views/pictureView.jsp");
dispatcher.forward(request, response);

And finally the JSP-File:

<table>
<c:forEach items="${pictureList}" var="picture">
    <tr>
        <td>${picture.imageData}</td>
    </tr>
</c:forEach>

So i want to display all the images in a table. At the moment it doesnt matter how the table looks like. With this code i get only a table with special numbers and letters. I think its the binary code, right? (For example: beans.Picture@22debaab or [B@3f391312])

Now where is the mistake? in the Code of the JSP-File cause i have to use

<img src="">

or something else? If this was the mistake, how should be coding this?

Thank you guys

Dear Newbie

This could help you: http://stackoverflow.com/questions/2340406/how-to-retrieve-and-display-images-from-a-database-in-a-jsp-page — Jose Luis, Dec 18 '16 at 12:25
@AtaurRahmanMunna I tried already with base64 but i didnt worked. How would you solve it, if you do it with base64? — , Dec 18 '16 at 12:47
@newbieQwer Please show the code, what you have tried with base64 ? — Ataur Rahman Munna, Dec 18 '16 at 12:54
@AtaurRahmanMunna `List list = new ArrayList(); ... while (rs.next()) { byte[] imageData = rs.getBytes("File_Data"); list.add(Base64.getEncoder().encodeToString(imageData)); }` And then i tried this in JSP in the `td` `img src="data:image/jpg;base64,${picture}"` — , Dec 18 '16 at 13:47
Please use `org.apache.commons.codec.binary.Base64` and let me know what happens. use the method `Base64.encodeBase64String()` to encode base64 string. — Ataur Rahman Munna, Dec 19 '16 at 05:00

score 0 · Answer 1 · answered Dec 19 '16 at 05:17

Use the code snippet in controller side.

List<String> list = new ArrayList<String>();
while (rs.next()) { 
    byte[] imageData = rs.getBytes("File_Data"); 
    list.add(org.apache.commons.codec.binary.Base64.encodeBase64String(imageData)); 
}
request.setAttribute("pictureList", list);

And show it in html page like that,

<table>
    <c:forEach items="${pictureList}" var="picture">
        <tr>
            <td><img src="data:image/jpg;base64,${picture}"/></td>
        </tr>
    </c:forEach>
</table>

Display all images from Database (blob) on a jsp file in a table

1 Answers1