4

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

我配置文件结构如下

  • 这是我的 CSS 代码

样式.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) }

4

1 回答 1

6

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

此资源处理程序将生成未映射的 URL，例如 /javax.faces.resource/css/style.css。这样做的主要优点是开发人员不再需要#{resource} EL 表达式来正确引用 CSS 文件中图像的相对 URL。

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

于 2013-08-28T09:10:45.953 回答