0

I am developing a web site with Spring 4 + JSF 2.0 framework + MySQL Database. I'm trying to retrieve a image from database and display it on browser. So basically I have a table called product_t with a LongBlob column called image, which is responsible to store png files.

I need to retrieve each image from each product in a page, so:

<ui:repeat value="#{productControllerImpl.list3NotNewRandomProducts()} var="product" varStatus="status">
<h2>#{product.name}</h2>
<strong>#{product.subDescription}</strong><br></br> <span>#{product.description}
</ui:repeat>

So far so good.

I search on google the following solution:

For each product in UI I need to call a Servlet in order to retrieve the image. As I'm using JSF + Spring, I wrote the following block code in UI:

<h:graphicImage   value="/images/#{productControllerImpl.findProductImageById(product.id)}"/>

And in my productControllerImpl I have this:

@Override
public byte[] findProductImageById(Long productId) {
    byte[] productImage = null;
    HttpServletResponse response = (HttpServletResponse) FacesContext.getCurrentInstance().getExternalContext().getResponse();      
    ServletOutputStream outputStream = null; 
    try {
        productImage = productService.findProductImageById(productId);
        response.reset();           
        outputStream = response.getOutputStream();
        response.setContentType("image/png");
        outputStream.write(productImage);
        outputStream.flush();       
        outputStream.close();
    } catch(Throwable e){
        throw new RuntimeException("Error processing product image: " + e.getMessage(), e);
    }

    return null;
}

So basically I am receiving the producIt from iteration, and search on database for the respective product image (I don't know if this is the best choice).

The problem here is, when this page is accessed I receive the full image in browser:

Product Image

And I'm pretty lost in this part.

Does anybody knows what I am missing here?

Thanks in advance.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
THIAGORC
  • 178
  • 1
  • 3
  • 11

1 Answers1

0

I assume you're referring to Show image as byte[] from database as graphic image in JSF page

I believe your main issue is you're ending your response stream: outputStream.flush();
outputStream.close(); remove them, and try it again on your doGet for the image servlet.

Personally I prefer StreamedContent with PrimeFaces as mentioned here Display dynamic image from database with p:graphicImage and StreamedContent

or OmniFaces graphicImage http://showcase.omnifaces.org/components/graphicImage rather than creating servlet to output the content.

This post by BalusC will solve all your issues: Servlet for serving static content

Community
  • 1
  • 1
VeenarM
  • 1,263
  • 1
  • 10
  • 14
  • Hi VeernarM. Appreciate your help. I tried to remove outputStream.flush(); outputStream.close(); However the result is the same. =( For StreamedContent, it is a PrimeFaces library, and my application will be very heavy with all these primefaces libraries just to show an image. I tried to use OminiFaces, but it only works with Java CDI. =( Why my image is redenring full screen on browser? – THIAGORC Feb 23 '17 at 13:20
  • You'd need to add more of your xhtml page to view, as its probably a CSS/page error, and nothign to do with your servlet then. – VeenarM Feb 23 '17 at 23:56
  • I could solve this with following approach: I added the Apache Commons Codec dependency into my project. And in DTO added the string returned by Base64.encodeBase64String: productDTO.setImage(Base64.encodeBase64String(productT.getImage())); productT.getImage() returns a byte[], which is the blob data from database. In my xhtml I added the following tag: (it works with tag also). So the problem was solved! Thanks Everybody and hope this solution helps other devs with same problem. =) – THIAGORC Mar 06 '17 at 16:12