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&v=3.2" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/layout/layout.css?ln=primefaces&v=3.2" /><script type="text/javascript" src="/temp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/layout/layout.js?ln=primefaces&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
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With