无法在JSF中加载CSS图像

Question

描述: 在我的JSF应用程序中,我通过CSS属性设置菜单背景图像.

我按如下方式配置了文件结构

• 这是我的CSS代码

style.css文件

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

这个CSS文件在/resources/css目录下,我正在使用Facelets页面导入css文件

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

导入CSS文件没有问题

问题描述

• 我在*.xhtml上映射了FacesServlet:

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

  如果我运行主页,则不会加载在css中配置的菜单图像

• 当我删除 图像FacesServlet上的映射配置*.xhtml是完全加载

我试过了

我在css文件中尝试了以下方法来加载图像

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

但我还没找到解决方案.

更新方案

• 添加了资源处理程序 faces-config.xml

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

• FacesServlet 配置 web.xml

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

• 将图像放在/resources/images目录下

• css文件中的图像访问格式

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

Answer 1

您可以使用OmniFaces的UnmappedResourceHandler来解决这个问题

此资源处理程序将生成未映射的URL,如/javax.faces.resource/css/style.css.这具有以下主要优点:开发人员不再需要#{resource} EL表达式,以便正确地引用CSS文件中的图像的相对URL.

或者在这里查看类似的问题/答案:防止在页面加载时将后缀添加到资源