Display multiple images from servlet

Question

I am trying to display mulitple images from servlet in a jsp page for my carousel but am displaying only the first image.I wanna know how to display all results of the Sql query.The servlet code is

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub      

    //response.setContentType("image/jpg");
    HttpSession myses = request.getSession(true);

    String imageid =  request.getParameter("id");
    //System.out.println("In servlet"+imageid);

    ServletOutputStream o; 

    try {
         Class.forName(driverName);
         con = DriverManager.getConnection(url,userName,password); 
         String sql = "select mid from carousel_two where cid= '"+imageid+"'";
         PreparedStatement stmt = con.prepareStatement(sql);
         ResultSet rs = stmt.executeQuery();
         myses.setAttribute("lis",rs);
         byte[] obj = new byte[1434295];
         byte[] sample = null;
         int srcPos = 0;
         //int i=0;
         //String encoded =new String ();
         o = response.getOutputStream();

         java.util.List<String> strings = new ArrayList<String>();

         //StringJoiner joiner = new StringJoiner(",");

         if(rs!=null ) {                 
             while(rs.next()) { 
                 String sql1 = "select img from carousel_two where mid= '"+rs.getInt("mid")+"'";
                 PreparedStatement stmt1 = con.prepareStatement(sql1);
                 ResultSet rs1 = stmt1.executeQuery();
                 if(rs1!=null) {
                     while(rs1.next()){ 
                     //int id = rs.getInt(1);
                     //System.out.println("id = "+id);
                     sample = rs1.getBytes("img");
                     int length = sample.length;
                     System.arraycopy(sample, 0, obj,srcPos, length);
                     srcPos += length;

                     //System.out.println("Length required = " + srcPos);

                     //if(rs!=null) {                
                         //System.out.println("mid"+rs.getInt("mid"));
                         //o.write(rs.getBytes("img"));
                         byte[] newArray = new byte[srcPos];
                         System.arraycopy(obj, 0, newArray, 0, srcPos);

                         response.setContentType("image/jpg");
                         // response.getOutputStream().write(newArray);

                         strings.add(DatatypeConverter.printBase64Binary(newArray));
                         //System.out.println(strings+"\n");

                         // encoded=DatatypeConverter.printBase64Binary(newArray);          
                     }
                 }           
          //}
          }
     }
     //int x=(encoded.split(";")).length;
     //  System.out.println("X"+x);

        //encoded=String.join(",", strings1);
        //encoded= String.join(",", strings); 
        String json = new Gson().toJson(strings);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        o.print(json);
        o.flush();                                   
    }catch (Exception e) {
     e.printStackTrace();
    }
}   

and the javascript code is

function trigger(idx, state) {
    document.getElementById('touchScroller').innerHTML=" ";
    $.ajax({
        type : "GET",
        url : "Sampleimage1",
        contentType :"application/json",
        data:{id:idx},
        success : function(data) {
            var da=data;
            //da=data.split(",");
            //alert(typeof data);
            //alert(da.length);
            $.each(da,function(index,item){
            alert( index);

            $('#touchScroller').append('<img src="data:image/jpg;base64,' +item +'" />');
        });                                           
    }                           
    });
}

am a newbie to this so any help will be appreciated.

Answer 1

#Edit

Replace the inner while loop for ResultSet with the following

while(rs1.next()){ 
    byte[] dbImageArr = rs1.getBytes("img");
    strings.add(DatatypeConverter.printBase64Binary(dbImageArr));
}

That's all is needed, rest can be ignored. This should fix your issue.

Suggestions:

A single HTTP call can return a single image resource (or binary content). You need to call the Servlet multiple times with the name or any other identifiable information of image using which Servlet will return correct image.

This would be the correct way of doing it. Suppose that you need a group of images. You know that group name is g1 and there are 5 images in it. You would create image links as following.

<img src="/ImageServlet?group=g1&seq=1>
<img src="/ImageServlet?group=g1&seq=2>
<img src="/ImageServlet?group=g1&seq=3>
<img src="/ImageServlet?group=g1&seq=4>
<img src="/ImageServlet?group=g1&seq=5>

This would make 5 calls to the servlet and which will return the images on the basis of group name and sequence number.

If you absolutely want to return all the images in one go, you will need to convert them to Base64 string. Then you can return JSON ( or any other format that you see fit) containing image Base64 content.

{
    "img1": "data:image/png;base64,i.....",
    "img2": "data:image/png;base64,i.....",
    "img3": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i.....",
    "img4": "data:image/png;base64,i....."
}

Note: First method is the correct method and has advantage in terms of performance and bandwidth utilization. As there would be 5 parallel calls made to get the images and any image downloaded would be shown without waiting for others to complete downloading.

Of course then there's option of merging images together as it's done during loading sprites for games, but you probably don't want to go that far.