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文件中尝试了以下方法来加载图像

background:url(images/default.gif);
background:url(#{resource['images:default.gif']});
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

您可以使用UnmappedResourceHandler by OmniFaces解决该问题

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

或者在这里查看类似的问题/答案：Prevent suffix from being added to resources when page loads

无法在JSF中加载CSS图像

1 个答案: