Unable to load CSS images in JSF

Question

Description: In my JSF application, I set the background images of the menu through the CSS property.

I configured the file structure as follows

• This is my CSS code.

style.css

#menu { height:35px; width:950px; background:url(images/default.gif); /*background:url(#{resource['images:default.gif']}); background:url(#{resource['images/default.gif']}); */ } 

and this CSS file is in the /resources/css directory and I am importing the css file on the Facelets page using

 <h:head> <h:outputStylesheet library="css" name="style.css"></h:outputStylesheet> </h:head> 

No problem importing CSS file

Description of the problem

• I mapped FacesServlet to * .xhtml:

    <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> 

  If I launch the homepage, menu images configured in css do not load

• When I delete the configuration displaying FacesServlet on *.xhtml images are fully loaded

I tried

I tried using the following methods in a css file to load an image

• background:url(images/default.gif);
• background:url(#{resource['images:default.gif']});
• background:url(#{resource['images/default.gif']});

But I have not found a solution yet.

Updated Solution

• Added resource handler in faces-config.xml

  <application><resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application>

• FacesServlet Configuration in web.xml

   <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> <url-pattern>/javax.faces.resource/*</url-pattern> </servlet-mapping> 

• Put the images in the /resources/images directory

• Image access format in css file

  #menu {background: url(images/bg.png) }

Answer 1

You can use OmniFaces UnmappedResourceHandler to solve this problem.

This resource handler will create unmarked URLs such as /javax.faces.resource/css/style.css. This has the main advantage that the developer no longer needs the EL # {resource} EL expression to correctly reference relative URLs to images in CSS files.

Or consider a similar question / answer here: Prevent adding a suffix to resources when loading pages