CODEWITHSUNDEEP
javamysqlspringhibernatejsp
Parveen
Parveen

Reputation: 3

converting blob image to array to display in the web page in spring mvc

Am trying to display an image for the profile of a customer. and the image is stored in blob type in mysql. am using spring mvc with hibernate. i know that to display an image which is blob type, we have to convert into bytes. i did upto some extent. now am stuck that am not able to display any image.

  my controller:
   @RequestMapping(value="/myProfile.htm", method=RequestMethod.GET)

  public ModelAndView Profilelist(HttpServletRequest request,ModelMap model,Customer        
 customer,Profile profile, HttpServletResponse response) throws SQLException , 
 Exception{
    //Profile profile = new Profile();

    String customerName = request.getUserPrincipal().getName();

    customer = customerService.getCustomerId(customerName);
    profile = profileService.getBycustomerId(customer);
    System.out.println("cust:  "+ customer);
    System.out.println("profile:  "+ profile);
    logger.error("Viewing Profile" +customerName);
    //Customer customer = new Customer();



    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    byte[] buf = new byte[1024];
    /*byte[] encodeBase64 = Base64.encodeBase64(buf);
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView mav = new ModelAndView();
    mav.addObject("profile", base64Encoded);*/
    Blob blob = profile.getContent();
    InputStream in = blob.getBinaryStream();
    System.out.println("id content" +in);
    int n = 0;
    while ((n=in.read(buf))>=0)
    {
       baos.write(buf, 0, n);

    }

    in.close();
    byte[] bytes = baos.toByteArray(); 
    System.out.println("bytes" +bytes);
    byte[] encodeBase64 = Base64.encodeBase64(buf);
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView mav = new ModelAndView();
    //mav.addObject("content", base64Encoded);
    customer.setEmailId(customerName);
    profile.setCustomer(customer);
    //profile.setContent(blob);
    System.out.println();
    profile = profileService.findProfileById(customer);
    model.addAttribute("content",base64Encoded);

    model.addAttribute("profile", profile);
    mav = new ModelAndView("myProfile");
    return mav;}

And in jsp am calling it as

       <img  src= "data:image/jpeg;bytes,${profile.content}"/>

My jsp is

     <form:form method="GET" modelAttribute="profile" action="myProfile.htm"   
             enctype="multipart/form-data">


            <div class="containerdiv" align="center" >

                   <img  src= "data:image/jpeg;bytes,${content}"/>

                   </div>
   </form:form>

Upvotes: 0

Views: 3944

Answers (4)

user5466587
user5466587

Reputation: 11

just use this code in JSP

<img alt="img" src="data:image/jpeg;base64,${content}"/>

there was 'bytes' in <img tag> and I'd got same broken icon. Then I use 'base64' in <img> tag and its work!

Upvotes: 1

Secondo
Secondo

Reputation: 451

Persisting Image Blob object on your database is not a good practice. just persist the filename of your image in db and the image itself to a certain path.

I know that this is not what you asking for but If you know how to upload a photo to a specific directory and since you are using spring You can take it as an alternatives.

why dont you create a Controller to read the image for you. see this:

@Controller
public class ImageReadFile{

    // this is for mapping your image related path. 
    @RequestMapping(value="/image/*")
    public void readImage(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        ServletContext sc = request.getServletContext();

        //here i uploaded my image in this path
        String imagePath = "/home/somefolder/Workspaces/Images/";
        String [] fragmentFilename = request.getServletPath().split("/");

        //Check if image isn't set
        if(fragmentFilename.length <= 2){
            return;
        }

        String filename = fragmentFilename[2];
        String requestedImage = "/"+filename;

        if(filename == null){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        File image = new File(imagePath, URLDecoder.decode(requestedImage, "UTF-8"));

        if(!image.exists()){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        String contentType = sc.getMimeType(image.getName());
        response.reset();
        response.setContentType(contentType);
        response.setHeader("Content-Length", String.valueOf(image.length()));
        Files.copy(image.toPath(), response.getOutputStream());
    }

}

This is how you gonna diplay the image 

<img alt="${profile.filename}" src="${pageContext.request.contextPath}/image/${profile.filename}">

this is how i display the image in my webapp.

Upvotes: 1

Lalit Jawale
Lalit Jawale

Reputation: 1246

You have written some wrong code, let me try to correct it,

Replace 

ModelAndView mav = new ModelAndView();
//mav.addObject("content", base64Encoded); 
customer.setEmailId(customerName);
profile.setCustomer(customer);
//profile.setContent(blob); 
System.out.println();
profile = profileService.findProfileById(customer);
model.addAttribute("content",base64Encoded);

model.addAttribute("profile", profile);
mav = new ModelAndView("myProfile");
return mav;}

With

ModelAndView mav = new ModelAndView();
customer.setEmailId(customerName);
profile.setCustomer(customer);
profile = profileService.findProfileById(customer);
mav.addObject("content", base64Encoded);
mav.addObject("profile", profile);   
return mav;
}

Upvotes: 0

StanislavL
StanislavL

Reputation: 57381

Looks like your image still uses blob from profile rather than encoded string. Try using content attribute directly

<img  src= "data:image/jpeg;bytes,${content}"/>

Upvotes: 0

Related Questions