Home/ Questions/Q 7850929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T19:01:38+00:00

I have been trying to get images rendered in Primefaces-application. This is working fine

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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