title: How to render images in JSF + Primefaces 3.2
body: <p>I have been trying to get images rendered in Primefaces-application. 
  This is working fine outside the accordion panel:</p>
  
  <pre><code>&lt;h:graphicImage library="images" name="testi.JPG" /&gt;
  </code></pre>
  
  <p>But when I try to use it inside the accordion panel, it is not working anymore:</p>
  
  <pre><code>&lt;p:accordionPanel&gt;
      &lt;p:tab title="Godfather Part I"&gt;
          &lt;h:panelGrid columns="2" cellpadding="10"&gt;
              &lt;h:graphicImage  library="images" value="testi.JPG" /&gt;
  </code></pre>
  
  <p>There is a tag for images in Primefaces, but there is no library tag at all, so I tried that as well:</p>
  
  <pre><code>&lt;p:tab title="Godfather Part II"&gt;
          &lt;h:panelGrid columns="2" cellpadding="10"&gt;
                      &lt;p:graphicImage url="/resources/images/testi.jpg" /&gt;
  </code></pre>
  
  <p>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?</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/theme.css?ln=primefaces-flick" /&gt;&lt;link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;amp;v=3.2" /&gt;&lt;link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;amp;v=3.2" /&gt;&lt;script type="text/javascript" src="/temp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;amp;v=3.2"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/temp/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;amp;v=3.2"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="/temp/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;amp;v=3.2"&gt;&lt;/script&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;title&gt;Primefaces Template&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
  </code></pre>
  
  <hr>
  
  <p>View source gives:
  This is outside of the accordion panel and it is working:</p>
  
  <pre><code>&lt;h:graphicImage library="images" name="testi.JPG" /&gt;
  </code></pre>
  
  <p>------------------->HTML:</p>
  
  <pre><code>&lt;img src="/temp/faces/javax.faces.resource/testi.JPG?ln=images" /&gt;
  </code></pre>
  
  <hr>
  
  <p>In Accordion panel using the same line of code that is working outside of the panel:</p>
  
  <pre><code>&lt;p:tab title="Godfather Part I"&gt;
          &lt;h:panelGrid columns="2" cellpadding="10"&gt;
              &lt;h:graphicImage  library="images" value="testi.JPG" /&gt;
              &lt;h:outputText value="The story begins as Don Vito Corleone,
  </code></pre>
  
  <p>------------------>HTML:</p>
  
  <pre><code>&lt;td&gt;&lt;img src="testi.JPG" /&gt;&lt;/td&gt;
  &lt;td&gt;The story begins as Don Vito Corleone,
  </code></pre>
  
  <hr>
  
  <p>Using Primefaces tag:</p>
  
  <pre><code>&lt;p:tab title="Godfather Part II"&gt;
          &lt;h:panelGrid columns="2" cellpadding="10"&gt;
                      &lt;p:graphicImage url="/resources/images/testi.jpg" /&gt;
  </code></pre>
  
  <p>----------------->HTML:</p>
  
  <pre><code>&lt;td&gt;&lt;img id="j_idt29:j_idt32" src="/temp/resources/images/testi.jpg" alt="" /&gt;&lt;/td&gt;
  </code></pre>
  
  <hr>
  
  <p>EDIT: THIS is working, but WHY?</p>
  
  <pre><code>&lt;h:graphicImage value="#{resource['images:testi.JPG']}"/&gt;
  </code></pre>
  
  <p>resource without S!!</p>
  
  <p>Thank you!
  Sami</p>