Question

I save images, css, and javascript (the folders has the same name) files in a resource folder in the webapp root. Should I be using URLs to get show the image in for example a graphicImage tag or should I be using the #{resources:libraryName..}?

Answer 1

Just use the therefor provided <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> components wherein you specify a path relative to the resources folder in the name attribute:

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="images/logo.png" />

JSF will worry about setting the right URL.

The #{resource} syntax is only necessary inside CSS files to reference background images.

See also:

• How to reference CSS / JS / image resource in Facelets template?
• How to reference JSF image resource as CSS background image url