<p：graphicImage>在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" />