primefaces graphicimage from database not loading

StackOverflow https://stackoverflow.com/questions/22444991

Question

I am having trouble displaying image from database on a primefaces graphicimage component. I am using primefaces 3.4.2, jsf 2.2, glassfish 3.1.2.2. Following is the simple code I am trying. I went through other posts related to p:graphicimage and incorporated the recommendations, still I gouldnt make this work. What is wrong here?

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form id="f1">
        <p:panel style="height: 500px ; width: 800px" visible="true">
            <p:graphicImage value="#{treeBean.image}" />
        </p:panel>
    </h:form>
</h:body>
</html>

TreeBean.java

@Named
@ApplicationScoped
public class TreeBean implements Serializable{
    @EJB
    private ImageEJB imageEjb;
    public StreamedContent getImage() throws IOException{
        FacesContext context = FacesContext.getCurrentInstance();
        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            return new DefaultStreamedContent();
        }
        else {
            Decisiontree dr = imageEjb.getTree();
            return new DefaultStreamedContent(new ByteArrayInputStream(dr.getImage()));
        }
    }
}

This is what I see in the browser console.

Error in console

Was it helpful?

Solution

  1. Add a MIME type in web.xml like below:-

    <mime-mapping>
   <extension>xhtml</extension>
   <mime-type>image/svg+xml</mime-type>
</mime-mapping>

  2. Change your return statement in your bean as below:-

    return new DefaultStreamedContent(new ByteArrayInputStream(dr.getImage()),"image/svg+xml");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top