How to view more than one image in a JSP page from database?

Question

I have problem trying to fetch images from db and then showing them in a JSP page:

ImageAction:

public class ImageAction {

private  byte[] itemImage;

public byte[] getItemImage() {
    return itemImage;
}

public void setItemImage(byte[] itemImage) {
    this.itemImage = itemImage;
}

public  void  execute() throws Exception{
      try {
          HttpServletResponse response = ServletActionContext.getResponse();
          response.reset();
          response.setContentType("multipart/form-data"); 
          byte[] imgData =(byte[])ServletActionContext.getRequest().getSession()
                           .getAttribute("imageData"); 
          System.out.println("imgData :: "+imgData);
          itemImage = imgData;
          ServletActionContext.getRequest().getSession().removeAttribute("imageData") ; 
          OutputStream out = response.getOutputStream();
          out.write(itemImage);
          out.flush();
          out.close();

      } catch (Exception e) {
          System.out.println("error :: ");
          e.printStackTrace();
      }
   //   return "success";
  }
}

JSP:

<tr >
    <td> <%= map.get(mapKey) %> </td>
    <td colspan="1" >
        <img src="<s:url value="ImageAction" />" width="115" border="0" />
    </td>   
</tr>

You would need some mechanism on your JSP page to convert your `byte[]` data to image — Darshan Lila, Jul 03 '15 at 10:34
As the answers posted so far are rather hacky and scary, here's an elaborate explanation of the plain JSP/Servlet way, fully independent from Struts or whatever MVC framework you're using: http://stackoverflow.com/questions/2340406/how-to-retrieve-and-display-images-from-a-database-in-a-jsp-page — BalusC, Jul 04 '15 at 05:36

Darshan Lila · Answer 1 · 2015-07-04T05:02:41.620

What you'll receive on your JSP page would be raw byte[], you need to process it a little, check following:

<a src="" id="imageSrc"/>

A simple anchor tag to display image.

Following code would convert the raw byte[] to it's equivalent Base64 string, viz is essential to display image.

<%
   byte data[]=request.getParameter(itemImage); //let itemImage for instance hold your data
   String encodedData=Base64.encodeBytes(data);
%>

Now you need a little utility on your JSP page to set base64 data

<script>
function imageBaseSixtyFourProcessor(baseSixtyFour){
    var img = new Image();
    img.src='';
        var imageUrl='data:image/gif;base64,'+baseSixtyFour;
        $('#imageSrc').attr('src',imageUrl);
        img.src = imageUrl;
    }
}
</script>

Call above function:

<script>
  imageBaseSixtyFourProcessor(<%encodedData%>);
</script>

Note : In my case I am displaying GIF file, you can change it as per your requirements.

Similarly you can have multiple images displayed in the same way.

Roman C · Answer 2 · 2015-07-03T11:30:56.400

Obvious usage is to move the image data to some collection, i.e. Map. The action should be aware of mapKey used to retrieve the image data from the map.

<s:iterator value="#session.imageDataMap">
  <img src="<s:url value="ImageAction"><s:param name="mapKey" value="%{key}"/></s:url>" width="115" border="0" /> 
</s:iterator>

If you get the data from session, then you should modify the code to use a collection.

...
Map<String, byte[]> imgDataMap =(Map<String, byte[]>)ActionContext.getContext().getSession().get("imageDataMap"); 
imageData = imgDataMap.get(mapKey);
System.out.println("imgData :: "+new Base64Encoder.encode(imgData));
itemImage = imgData;
...

In the above example the Struts 2 session map is used instead of servlet session.

How to view more than one image in a JSP page from database?

2 Answers2

Linked