<p:graphicImage> not working in jsf

Question

I recently included a <p:galleria> in my JSF page as shown in PrimeFaces showcase. The code is executing without any errors, but it doesn't displaying any images. I think this is due to the incorrect path format for the images. How is this caused and how can I solve it?

index.xhtml

<p:galleria value="#{compa.images}" var="image" panelWidth="1570" panelHeight="250" showCaption="true">  
    <p:graphicImage value="resource/images/#{image}"  name="COMPANY CREATION"/>  
</p:galleria> 

compa.java

public void init() {  
    images = new ArrayList<String>();  

    for(int i=1;i<=10;i++) {  
        images.add("resource/images" + i + ".jpg");  
    }  
}

The images path in IDE is ps\build\web\resource\images.

Answer 1

First of all, JSF is in the context of this question merely a HTML code generator. In HTML, images are represented by the <img> element whose src attribute should point to a (relative) URL from which the webbrowser could download the image individually. Have you checked the generated HTML output by opening the JSF page in webbrowser and doing rightclick and View Source? Do the generated <img> elements look all right? Likely not.

The way how you used the name attribute is incorrect.

<p:graphicImage value="resource/images/#{image}"  name="COMPANY CREATION"/>  

The name attribute represents the "resource name". It's basically the path to the resource, relative from the /resources folder on. This attribute has precedence over value attribute. So basically you're trying to create

<img src="COMPANY CREATION" />

This is not right. JSF would instead auto-generate a RES_NOT_FOUND URL. You should have seen that in the generated HTML output.

Provided that your intent is to show "COMPANY CREATION" as tooltip, then the right way is

<p:graphicImage name="images/#{image}" title="COMPANY CREATION" />

Or, if you insist in using value attribute, which takes a context-relative URL instead of a resource name:

<p:graphicImage value="/resources/images/#{image}" title="COMPANY CREATION" />