Retrieve Image from Database and display in another jsp page

Question

I am trying to retrieve multiple images from database and display those images in another JSP page. First, I tried single image to display in particular JSP page, I retrieved but the display is showing as file type, I want to display that image in particular JSP page. I am using MySQL database.

my servlet code:

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/Retrieve")
public class Retrieve extends HttpServlet {
    static {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {

            e.printStackTrace();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {   Connection con = null;
    PreparedStatement ps = null;
ResultSet rs = null;

        try {
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/vikas", "root", "root");
            ps = con.prepareStatement("select * from rough");
            rs=ps.executeQuery();
                    if (rs.next()) {
                        byte[] content = rs.getBytes("image");
                        response.setContentLength(content.length);
                        response.getOutputStream().write(content);
                        request.setAttribute("image", content);
                        RequestDispatcher rd=request.getRequestDispatcher("View.jsp");  
                        rd.forward(request, response);  
                    } else {
                        response.sendError(HttpServletResponse.SC_NOT_FOUND); // 404.
                    }

            } catch (SQLException e) {
                throw new ServletException("Something failed at SQL/DB level.", e);
            }
        }


    }

jsp code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Display Image</title>
</head>
<body>
<div>THE DISPLAY</div>
<div style="width:25%; height:25%">
<%request.getAttribute("image"); %>
</div>

</body>
</html>

Maybe you need to add content type. Something like: response.setContentType(getServletContext().getMimeType(imageName)); — Level_Up, Sep 04 '18 at 07:49
First of all if you want to make forward you should not write to output stream of the response or set content length. You may try to convert the bytes to Base64 image file string for example png or jpg and pass it to the attribute and then to src on img tag as the request scope attribute image. `
"/>
` — Kamil Leis, Sep 04 '18 at 07:49

benjamin c · Answer 1 · 2018-09-04T13:30:11.640

2

Try using Base64 encoding,

Use Apache Commons Codec to do Base64 encodings.

byte[] content = rs.getBytes("image");
String base64Encoded = new String(Base64.encodeBase64(content), "UTF-8");
request.setAttribute("imageBt", base64Encoded);

Retrieve it from JSP

<img src="data:image/png;base64,${requestScope['imageBt']}"/>

For multiple images you could try something like this, (i didnt try this)

List<String> images = new ArrayList<>();
if (rs.next()) {
    byte[] content = rs.getBytes("image");
    images.add(new String(Base64.encodeBase64(content), "UTF-8"));
}
request.setAttribute("imageBt", images);

In JSP

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:forEach var="img" items="${imageBt}">
    <img src="data:image/png;base64, ${img}"/>
</c:forEach>

edited Sep 04 '18 at 13:30

answered Sep 04 '18 at 08:01

benjamin c

2,278
15
25

@ Benjamin C, Yes I got it. Thank you. Will u please help in "how to retrieve multiple images from database." – VIKAS DUBBAKA Sep 04 '18 at 11:51
@VIKASDUBBAKA multiple images means multiple byte arrays, you should retrieve them from database as usual and encode to base64 strings, now you have a list of strings, then set this list to request attribute and from jsp, iterate trough that list as `c:forEach` – benjamin c Sep 04 '18 at 12:02
sorry i don't have enough reputations to accept your answer – VIKAS DUBBAKA Sep 04 '18 at 12:34
@VIKASDUBBAKA check the modified answer for multiple image case, but i did not try that code – benjamin c Sep 04 '18 at 13:32
that code is not working – VIKAS DUBBAKA Sep 13 '18 at 17:11
@VIKASDUBBAKA which part ? – benjamin c Sep 13 '18 at 17:11
sorry sorry its working, but my requirement is the images should display one by one but im getting in one line – VIKAS DUBBAKA Sep 13 '18 at 17:23
@VIKASDUBBAKA restructure your html, may be putting `
` at the end of `` – benjamin c Sep 13 '18 at 17:26
Thank you, i got it – VIKAS DUBBAKA Sep 13 '18 at 17:34

Retrieve Image from Database and display in another jsp page

1 Answers1

Linked