Blob image from Database and show in Jsp

Question

                        <%-- 
                            Document   : Profile
                            Created on : Jun 5, 2016, 1:28:02 AM
                            Author     : User
                        --%>

                        <%@page import="ServletHolder.Database"%>
                        <%@page import="java.sql.*"%>
                        <%@page import="java.io.*"%>

                        <%
                                      response.setHeader("Cache-Control","no-cache");
                                      response.setHeader("Cache-Control","no-store");
                                      response.setDateHeader("Expires", 0);
                                      response.setHeader("Pragma","no-cache");


                                     HttpSession s=request.getSession();



                            try{
                            String a=(String)s.getAttribute("email");
                            String b=(String)s.getAttribute("password");

                            if((a.equals("a") && b.equals("b"))){

                            }else{
                                response.sendRedirect("index.jsp");
                            }
                            }catch(Exception e){
                                response.sendRedirect("index.jsp");
                            }

                            Connection con=Database.getConnection();
                            PreparedStatement pst;
                            ResultSet rs;
                            String c="shakil123@gmail.com";
                            String ah="";
                            Blob img;
                            byte[] imgdata=null;
                            try{

                            String al="select * from `uploadpic` where `email`='"+c+"'";
                            pst=con.prepareStatement(al);
                            rs=pst.executeQuery();

                            if(rs.next()){
                                ah=rs.getString("email");
                                img=rs.getBlob("pic");
                                imgdata=img.getBytes(1, (int)img.length());
                            }

                            }catch(Exception e){
                                ah=e.toString();
                            }

                               response.setContentType("image/gif");
                               OutputStream o = response.getOutputStream();
                             //  o.write(imgdata);
                              // o.flush(); 
                              // o.close();


                        %>

                        <%@page contentType="text/html" pageEncoding="UTF-8"%>
                        <!DOCTYPE html>
                        <html>
                            <head>
                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                                <title>JSP Page</title>

                            </head>
                            <body><!-- onload="noBack()" onpageshow="noBack()">-->
                                <h1>Profile</h1>

                                <div span="12">

                                    <div sapan="9">

                                        <p><strong> Hello User Welcome!!!</strong></p>
                                        <img src="scrum-chart.jpg" alt="Mountain View" style="width:200px;"><br>
                                        <p><%=ah%><p>

                                            <img src="<%

                                            o.write(imgdata);
                                            o.flush();
                                            o.close();

                                                       %>" alt="Profile Picture" width="200" title="Profile Picture">

                                    </div>
                                    <div sapan="3">

                                        <p><strong> Advertisement</strong></p> 

                                    </div>

                                    </div>

                                <a href="Editprofile.jsp"> Edit Profile</a><br>


                                <form action="Logout" method="post">

                                    <input type="submit" value="Logout">

                                    </form>
                            </body>
                        </html>

But the problem is when i am visiting my profile it only shows the image from the database.that is only retrieved image is showing in the page but the other code is not working and Other properties is not showing in the page....

Can you [clarify](http://stackoverflow.com/posts/37707995/edit) your explanation of the problem & expected vs actual result a little? I don't understand it at the moment. — zapl, Jun 08 '16 at 16:41
when i load this page this page is only containing the image from database. But t have added more thing like paragraph,another image but this is not showing in this page. — Shakib Ahmed, Jun 08 '16 at 16:43

score 0 · Answer 1 · edited May 23 '17 at 12:08

Your code cannot work, because you are mixing the html-page and the binary data from the image.

You simply send the binary data of the image instead of an link to the image.

To fix the problem, you will need to create another servlet, which will send the image.

You also could create a base64 String and use the data-source: How to display Base64 images in HTML?

Another problem with this code: You can inject SQL with the email query parameter. I assume you will edit the code to use the query parameter email as SQL parameter. Never use string concatenation with unsafe parameter. Better use PreparedStatement

String al="select * from `uploadpic` where `email`='"+c+"'";

Update I just saw, you used the session and not a query parameter. But the problem would be the same.

score 0 · Answer 2 · answered Feb 07 '18 at 10:30

The line

o.write(imgdata);

display an array like that [b185....

You should convert it as a String.

Create an Java Class (for example BlobToString ) and add it a method (convert) to convert Blob to String. You can use this

public class BlobToString {
    public String convert(byte[] blob) {
        String str = "";
        //read bytes from ByteArrayInputStream using read method
        if (blob != null && blob.length > 0) {
            for (byte b : blob) {
                str = str + (char) b;
            }
        }
        return str;
     }
}

import the java class BlobToString to your JSP

 <%@ page import="my.package.BlobToString" %>

Create a new instance

 BlobToString blobToString = new BlobToString()

and replace

o.write(imgdata);

By this line

o.write(blobToString.convert(imgdata));

Blob image from Database and show in Jsp

2 Answers2