GWT - image from database

Question

I'm actually working on a GWT based website. Now I'm stuck on how I should display images stored in a database on my website.

Basically I've a bytearray in my database, which I fetch using hibernate. Now should I probably create an ... tag out of that data, but I don't know how

I'm using GWT in Java and Hibernate

Answer 1

Here is the solution. First you should encode the byte array by using com.google.gwt.user.server.Base64Utils.toBase64(byte[]) . But this method does not work for IE 7. and IE8 has 32kb limit.. IE9 does not have this limit.

here is the method on the server

public String getImageData(){
      String base64 = Base64Utils.toBase64(imageByteArray); 
      base64 = "data:image/png;base64,"+base64;
      return base64;
}

Here is the client method ;

@Override 
public void onSuccess(String imageData) {     
    Image image = new Image(imageData);     
    RootPanel.get("image").add(image); 
} 

Answer 2

I don't know how GWT works, albeit you can map a servlet/controller which returns resourceStream. For example if you map a servlet "imageViewer" which takes imageId param, request to image would become

/imageViewer?imageId=1234

Hibernate object would have reference to the blob, so you can return that. Reference on UI would be

<img src="/imageViewer?imageId=1234"/>

Update: You may not be able to use Model as it is to return image, you would need an explicit controller or servlet which returns stream data.
In servlet you would do something like

// get reference to input stream
InputStream in = hibnerateObject.getImage();  
// set MIME type etc
response.setContentType(mimeType);
OutputStream out = response.getOutputStream();
while ((len = in.read(buf)) >= 0)
 out.write(buf, 0, len);
in.close();
out.close();