p:graphicImage not rendered in Internet Explorer 10+

Question

I'm trying to display p:graphicImage with dynamic content. My view:

<p:graphicImage value="#{loginBean.loginImage}" />

Backing bean (Spring Bean / Singleton Scope)

public StreamedContent getLoginImage() throws IOException
    {
        if (FacesContext.getCurrentInstance().getCurrentPhaseId() == PhaseId.RENDER_RESPONSE)
        {
            return new DefaultStreamedContent();
        }

        String loginImage;

        if (developmentState)
        {
            loginImage = "dev.jpg";

        } else
        {
            loginImage = "prod.jpg";
        }

        final byte[] bytes = ... load bytes
        return new DefaultStreamedContent(new ByteArrayInputStream(bytes), "image/jpg");
    }

This works fine in Firefox / Chrome. But it fails in IE 10+ Instead of real image there is empty box rendered

My login page uses:

<h:head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </f:facet>
</h:head>

Page is rendered. Only image is missing in IE (Firefox / Chrome renders correctly). No errors on server side even with TRACE level enabled.

IE:

<img id="j_idt10" alt="" src="/appContext/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&amp;pfdrid=ufpDFHhNpCx9dNk92OfD7uAPP6LjduXzuDwZf73cSco%3D&amp;pfdrt=sc&amp;pfdrid_c=true">

Chrome:

<img id="j_idt10" src="/appContext/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&amp;pfdrid=ufpDFHhNpCx9dNk92OfD7uAPP6LjduXzuDwZf73cSco%3D&amp;pfdrt=sc&amp;pfdrid_c=true" alt="">

Firefox:

<img alt="" src="/appContext/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&amp;pfdrid=ufpDFHhNpCx9dNk92OfD7uAPP6LjduXzuDwZf73cSco%3D&amp;pfdrt=sc&amp;pfdrid_c=true" id="j_idt10">

IExplore DEV console says:

HTTP    GET 200 44,29 KB    16 ms   <img> for image
/appConctext/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&pfdrid=ufpDFHhNpCx9dNk92OfD7uAPP6LjduXzuDwZf73cSco%3D&pfdrt=sc&pfdrid_c=true

Any help will be really appreciated. Thanks

Hello @BalusC. I've added request / image path into original post. It is HTTP 200 if looking into IE Console — tillias, Mar 02 '16 at 08:56
Content-Type image/jpg HTTP/1.1 200 OK When opening direct link in IExplore it says: This page contains the following errors: error on line 1 at column 1: Document is empty error on line 1 at column 1: Encoding error Below is a rendering of the page up to the first error. dynamiccontent.properties.xhtml — tillias, Mar 02 '16 at 11:24

score 1 · Answer 1 · answered Apr 21 '16 at 19:37

1

Inspired by the comment of BalusC, I added the Content-Type header "image/jpeg" in the DefaultStreamedContent part.

return new DefaultStreamedContent(new ByteArrayInputStream(bytes), "image/jpg");

Note: "image/jpg" did not work with Internet Explorer

answered Apr 21 '16 at 19:37

dvtoever

3,896
1
28
29

Please note that in my original post Content-Type header is set. But it still not working – tillias May 06 '16 at 08:07

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Browsers doesn't refresh a image with ajax if the URL will not be changed. Therefore you should add a random number to the resource url. Relate with this link

edited May 23 '17 at 12:01

Community

1
1

answered May 18 '16 at 08:47

wittakarn

3,124
1
18
31

score 0 · Answer 3 · answered Sep 20 '16 at 07:22

I found a workaround that worked in my case.

 public StreamedContent getLoginImage() throws IOException {
  if (FacesContext.getCurrentInstance().getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
   return new DefaultStreamedContent();
  }

  String loginImage;

  if (developmentState) {
   loginImage = "dev.jpg";

  } else {
   loginImage = "prod.jpg";
  }

  final byte[] bytes = ...load bytes

  final InputStream stream = new ByteArrayInputStream(bytes);

  BufferedImage bufferedImg = ImageIO.read(stream);
  ByteArrayOutputStream os = new ByteArrayOutputStream();
  try {
   ImageIO.write(bufferedImg, "png", os);
  } catch (IOException e) {
   e.printStackTrace();
  }

  return new DefaultStreamedContent(new ByteArrayInputStream(os.toByteArray()), "image/jpg");
 }

score 0 · Answer 4 · answered Dec 02 '19 at 09:52

0

In my case changing content type from image/jpg to image/jpeg solved the problem with IE 11.

answered Dec 02 '19 at 09:52

Michał Stochmal

5,895
4
36
44

p:graphicImage not rendered in Internet Explorer 10+

4 Answers4