CODEWITHSUNDEEP
jsf-2primefaces
tillias
tillias

Reputation: 1275

p:graphicImage not rendered in Internet Explorer 10+

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

Upvotes: 3

Views: 1639

Answers (4)

Michał Stochmal
Michał Stochmal

Reputation: 6650

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

Upvotes: 0

Charles Follet
Charles Follet

Reputation: 817

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");
 }

Upvotes: 0

wittakarn
wittakarn

Reputation: 3162

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

Upvotes: 0

dvtoever
dvtoever

Reputation: 3996

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

Upvotes: 1

Related Questions