Display Image with all data from database on jsp in form

Question

I have a longblob in my database, uploaded an image and it saved successfully. While retrieving I got a blob object. Now I'm converting it into bytes. Then it only shows an image rather than the form. And if don't convert it will show the JSP form with other data than the image. Please help me how to show both image and the data on a JSP page together.

My entity:

    private Integer basicProfileIdp;
    @Column(name = "FIRST_NAME")
    private String firstName;
    @Column(name = "LAST_NAME")
    private String lastName;
    @Column(name = "PINCODE")
    private String pincode;
    @Column(name = "PROFILE_PIC", columnDefinition = "longblob")
    private Blob profilePic;
    @Column(name = "DOB")
    @Temporal(TemporalType.TIMESTAMP)
    private Date dob;
    @Column(name = "CONTACT_DETAIL")
    private String contactDetail;
    @Column(name = "ADDRESS")
    private String address;
    @Column(name = "CITY")
    private String city;

My Controller:

@RequestMapping(value = "/userBasicDetails", method = RequestMethod.GET)
    public String getUserBasic(@ModelAttribute("user") UserBasicProfile userBasicProfile, Model model,
            @RequestParam("id") Integer id, HttpServletRequest request, HttpServletResponse response)
            throws IOException, SQLException, GAException {
        LOGGER.info("GetuserBasicDetails method called");

        UserAuth userAuth = new UserAuth();
        userAuth.setUserIdp(id);

        UserBasicProfile useBasicProfileDetails = userBasicServiceImpl.getUserBasicById(id);
        LOGGER.info("useBasicProfileDetails :" + useBasicProfileDetails);

        if (useBasicProfileDetails == null) {
            try {
                throw new GAException(ErrorCodes.GA_DATA_NOT_FOUND);
            } catch (GAException e) {
                int errCode = e.getCode();
                LOGGER.info("Error Code :" + e.getCode());
                if (errCode == 1001) {
                    LOGGER.info("Database Error" + e.getMessage());
                } else if (errCode == 4265) {
                    LOGGER.info("Authentication Error" + e.getMessage());
                } else if (errCode == 4294) {
                    LOGGER.info("Data Not Found Error" + e.getMessage());
                }
            }
        }

        model.addAttribute("useBasicProfileDetails", useBasicProfileDetails);



//        OutputStream out = response.getOutputStream();
//        response.setContentType("image/jpeg, image/jpg, image/png, image/gif");
//
//        int blobLength;
//        byte[] blobAsBytes = null;
//        try {
//            // get the length of blob and and tore the array of the blob in byte
//            // array at pos 1.
//
//            blobLength = (int) useBasicProfileDetails.getProfilePic().length();
//            blobAsBytes = useBasicProfileDetails.getProfilePic().getBytes(1, blobLength);
//
//            // print the image as output
//
//            out.write(blobAsBytes);
//            out.flush();
//            out.close();
//
//        } catch (SQLException e) {
//            LOGGER.info(e.getMessage());
//        }

        LOGGER.info("Get UserBasic by ID method complete");
        return "UserBasicProfile";
    }

My JSP page:

    <form:form id="UserForm" name="UserForm" role="form" modelAttribute="user" action="saveUserBasic" method="post" enctype="multipart/form-data">
    <div class="col-md-4 col-lg-4"></div>
    <div class="col-md-4 col-lg-4">
    <h2>UserBasicDetails</h2>
    <div class="row">
    <div class="col-sm-4">
    <h5>BasicProfile IDp</h5>
    </div>
    <div class="col-sm-8">
    <form:input name="basicProfileIdp" id="basicProfileIdp" path="basicProfileIdp" class="form-control input-sm" value="${useBasicProfileDetails.basicProfileIdp }" />
    </div>
    </div>
    <div class="row">
    <div class="col-sm-4">
    <h5>UserIDF</h5>
    </div>
    <div class="col-sm-8">
    <form:input name="userIdf.userIdp" id="userIdf.userIdp" path="userIdf.userIdp" class="form-control input-sm" value="${useBasicProfileDetails.userIdf.userIdp }" />
    </div>
    </div>
    <div class="row">
    <div class="col-sm-4">
    <h5>FirstName</h5>
    </div>
    <div class="col-sm-8">
    <form:input name="firstName" id="firstName" path="firstName" class="form-control input-sm" value="${useBasicProfileDetails.firstName }"/>
    </div>
    </div>
    <div class="row">
    <div class="col-sm-4">
    <h5>LastName</h5>
    </div>
    <div class="col-sm-8">
    <form:input name="lastName" id="lastName" path="lastName" class="form-control input-sm" required="required"value="${useBasicProfileDetails.lastName }" />
    </div>
    </div>
    <div class="row">
    <div class="col-sm-4">
    <label for="fileUpload">Profile Picture</label>
    </div>
    <div class="col-sm-8">
    <img src="${useBasicProfileDetails.profilePic }">
    <input id="fileUpload" type="file" name="fileUpload" />
    </div>
    </div>