4

I have been trying to get images rendered in Primefaces-application. This is working fine outside the accordion panel:

<h:graphicImage library="images" name="testi.JPG" />

But when I try to use it inside the accordion panel, it is not working anymore:

<p:accordionPanel> <p:tab title="Godfather Part I"> <h:panelGrid columns="2" cellpadding="10"> <h:graphicImage library="images" value="testi.JPG" />

There is a tag for images in Primefaces, but there is no library tag at all, so I tried that as well:

<p:tab title="Godfather Part II"> <h:panelGrid columns="2" cellpadding="10"> <p:graphicImage url="/resources/images/testi.jpg" />

So could somebody tell me how to do that and what is the correct way to do that, because there is plenty of different choices but nothing is working in my case? How can I add like a universal images-folder to my application, where is no path at all etc?

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/theme.css?ln=primefaces-flick" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.2" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;v=3.2" /><script type="text/javascript" src="/temp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;v=3.2"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Primefaces Template</title></head><body>

View source gives: This is outside of the accordion panel and it is working:

<h:graphicImage library="images" name="testi.JPG" />

------------------->HTML:

<img src="/temp/faces/javax.faces.resource/testi.JPG?ln=images" />

In Accordion panel using the same line of code that is working outside of the panel:

<p:tab title="Godfather Part I"> <h:panelGrid columns="2" cellpadding="10"> <h:graphicImage library="images" value="testi.JPG" /> <h:outputText value="The story begins as Don Vito Corleone,

------------------>HTML:

<td><img src="testi.JPG" /></td> <td>The story begins as Don Vito Corleone,

Using Primefaces tag:

<p:tab title="Godfather Part II"> <h:panelGrid columns="2" cellpadding="10"> <p:graphicImage url="/resources/images/testi.jpg" />

----------------->HTML:

<td><img id="j_idt29:j_idt32" src="/temp/resources/images/testi.jpg" alt="" /></td>

EDIT: THIS is working, but WHY?

<h:graphicImage value="#{resource['images:testi.JPG']}"/>

resource without S!!

Thank you! Sami

Improve this question
2
  • From the code you provided it should work (if the image path is correct). It is the same as the Primefaces showcase. Could you post some more code (at least the header of the page and the complete accordionPanel). Commented Apr 26, 2012 at 13:47
  • I added some more code and header and source html codes. It is exactly same than showcase and my images are in resources/images/. Commented Apr 26, 2012 at 16:05

1 Answer 1

Reset to default
14

Your mistake is that you used value attribute instead of name attribute:

<h:graphicImage library="images" value="testi.JPG" />

When referencing a resource, you must use name attribute instead.

<h:graphicImage library="images" name="testi.JPG" />

The value attribute namely points to an URL, not to a resource name.

Unrelated to the concrete problem, you're not entirely understanding how to use library attribute properly. It's not intended to separate images, CSS and JS files from each other. There you already have the sole tagname of the <h:graphicImage>, <h:outputStylesheet> and <h:outputScript> tags for. The library attribute is supposed to be used in modular web applications where the image/CSS/JS files are stored in an external JAR file. The library attribute allows you to version them and to override them by the main webapp. See also What is the JSF resource library for and how should it be used?

Fix your <h:graphicImage> to remove that wrong library attribute usage:

<h:graphicImage name="images/testi.JPG" />

Or to introduce a fullworthy webapp-specific library where you put all resources in:

<h:graphicImage library="default" name="images/testi.JPG" />
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you! Could you pls tell me why this is working?<h:graphicImage value="#{resource['images:testi.JPG']}"/> resource without S? Confusing. U are quite often answering and you know a lot, so could you tell me how to internationalize facelets? I am using global bundle and Netbeans.
The last didn't work or I got it wrong, but every else did. I mean this: <h:graphicImage library="default" name="images/testi.JPG" />
The #{resource} converts the given resource name to an URL. As to the last example, put the images folder in another folder named default. So: /resources/default/images/testi.JPG. If you have a newer version, you can just create e.g. /resources/default/1_1/images/testi.JPG and JSF resource handler will automatically serve it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.