在表单中以jsp显示来自数据库的所有数据的图像

Question

我的数据库中有一个longblob，上传了一张图片并成功保存。在检索时我得到了一个blob对象。现在我将它转换成字节。然后它只显示图像而不是表格。如果不进行转换，它将显示JSP表单以及除图像之外的其他数据。请帮助我如何在JSP页面上同时显示图像和数据。

我的实体：

    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;

我的控制器：

@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";
    }

我的JSP页面：

    <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>