How to render images in JSF + Primefaces 3.2

Question

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

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). — Matt Handy, Apr 26 '12 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/. — Sami, Apr 26 '12 at 16:05

score 14 · Accepted Answer · edited May 23 '17 at 10:28

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" />

Thank you! Could you pls tell me why this is working? 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. — Sami, Apr 26 '12 at 17:26
The last didn't work or I got it wrong, but every else did. I mean this: — Sami, Apr 26 '12 at 17:33
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. — BalusC, Apr 26 '12 at 17:43

How to render images in JSF + Primefaces 3.2

1 Answers1