graphicimage not rendering streamedcontent in Primefaces

Question

I'm using streamedcontent to render a byte sent from JSF then send it back as a streamed content as following:

<p:graphicImage value="#{manage.bytesToStreamedContent(car.image)}"/>

where image is the byte array of the image stored in the database

backing bean:

public StreamedContent bytesToStreamedContent(byte[] bytes)
{
    InputStream is = new ByteArrayInputStream(bytes);
    StreamedContent image = new DefaultStreamedContent (is, "image/jpeg");
    return image;
}

But I'm not getting the image in the JSF page. I got this message appearing in the server log:

WARNING: JSF1091: No mime type could be found for file dynamiccontent. To resolve this, add a mime-type mapping to the applications web.xml.

and:

SEVERE: Error in streaming dynamic resource.

can you please help me out here, I cant find any useful info regarding this issue

PS:

Im using the following libraries:

Mojarra 2.1.3

PrimeFaces 3.1.1

Glassfish 3.1

possible duplicate of [Problems displaying database blob image in Primefaces graphicimage](http://stackoverflow.com/questions/10073905/problems-displaying-database-blob-image-in-primefaces-graphicimage) — BalusC, Jun 27 '13 at 11:49
Related/duplicate questions: http://stackoverflow.com/questions/8207325/display-image-from-database-with-pgraphicimage/, http://stackoverflow.com/questions/10073905/problems-displaying-database-blob-image-in-primefaces-graphicimage, http://stackoverflow.com/questions/10944673/how-to-use-pgraphicimage-with-defaultstreamedcontent-in-an-uirepeat/, http://stackoverflow.com/questions/8304967/how-to-use-pgraphicimage-with-streamedcontent-within-pdatatable/ — BalusC, Jun 27 '13 at 11:51
@BalusC but this post is older than some of the "related" questions you have mentioned!!! — fareed, Jun 27 '13 at 16:35
Post age doesn't matter. The duplicate link just points to the canonical answer which explains and solves the problem in depth for which you don't need to click off the site. — BalusC, Jun 27 '13 at 16:40

fareed · Accepted Answer · 2013-06-27T00:00:47.460

11

Found where the problem was. The problem wasn't in the graphicimage. It was because the graphicimage tag is being loaded dynamically (similar issue when trying loading from datatable). Dynamic images cannot be rendered directly in datatable or datagrid. (Workaround is to assign a param and bring the images from the id).

However, the solution is here

edited Jun 27 '13 at 00:00

answered Mar 06 '12 at 23:08

fareed

3,034
6
37
65

maple_shaft · Answer 2 · 2012-03-03T02:48:41.303

This is an odd problem and I don't think that adding the mime-type to web.xml will fix it. It is listed as both a bug in PrimeFaces with a target for 3.2

http://code.google.com/p/primefaces/issues/detail?id=3546

And it is also listed as an open bug in Mojarra 2.1.1. There is a patch submitted for this bug however it looks like you will have to manually apply the code to the Mojarra 2.1.1 source and build it. One would think that this would be fixed in 2.1.3 however, Glassfish may have its own prebundled Mojarra implementation that is still at an earler version and your application may be using this instead.

http://java.net/jira/browse/JAVASERVERFACES-2103

EDIT:

You can just pass the byte[] directly as an argument to the method like that. What you can do though is pass the id of the car as a param and then retrieve that car and fetch the bytes from the Car entity. The reason for this is because the graphicImage actually renders as an HTML img tag and this occurs in a separate HTTP request from the request for the JSF page. Download and install the Firebug plugin for Firefox and you will see this occur, the page is requested, then subsequent requests occur for the images after the page is retrieved. Because of this ViewScoped and RequestScoped beans cannot be accessed in this way, however a request parameter can still be passed with the necessary information needed to retrieve the Car bytes for the image.

<p:graphicImage value="#{manage.bytesToStreamedContent}">
<f:param name="item_id" value="#{car.id}" />
</p:graphicImage>

Now in your managed bean property you can get the car id, and after you get the car id you should be able to get the right car.

public StreamedContent getBytesToStreamedContent() {
  String id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("item_id");
  //Now get the car with the id
}

So what are my options to present my byte array as image on jsf page? — fareed, Mar 02 '12 at 21:13
@fareed See the edit to my answer above. I think that perhaps you may be using the graphicImage incorrectly. — maple_shaft, Mar 03 '12 at 02:49
I tried what u have suggested here but I got the same result. I also tried getting the image with passing a defined string directly from the backing bean and Im getting the same thing, its not rendering. Really stuck with this one — fareed, Mar 03 '12 at 14:26

score 3 · Answer 3 · answered Mar 02 '12 at 12:16

In general, it's not a great idea to create the StreamedContent in the getter for graphicimage. The image will be fetched in a separate request from the rest of the content, meaning variables depending on iterators will not work. This means that in the relevant call to bytesToStreamedContent the bytes array will be null/empty. If you put breakpoints inside the method you will probably see that in the last call there is no data in bytes.

You need to make sure the image is generated while you still have access to all the needed content and then store it in a way that you get retrieve it again in bytesToStreamedContent. Whether or not this will fix the problem and actually work for you is hard to say without seeing the rest of the code. I would start by trying to remove the byte array argument and returning a static image to confirm that this is the problem.

the bytes are coming from the database in the first place and passed to JSF. Then from JSF im sending a request to show as a streamed content to view the image. However, I tried to read the file as an inputstream from the application sourceFiles and create a add to streamedContent but still it didnt render. Finally, I tried to get the file directly from the static source as following : and this time it rendered successfully. What do you think? — fareed, Mar 02 '12 at 14:47
if using something like InputStream is = new FileInputStream("C:\images\lemontree.jpg"); doesn't help, I really have no clue what is wrong. I'm mostly just concerned about the car.image parameter not working as you think. — MatsT, Mar 05 '12 at 10:06

graphicimage not rendering streamedcontent in Primefaces

3 Answers3

Linked