无法在JSF中加载CSS图像

Question

描述:在我的应用程序中，我通过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目录下，我使用

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

导入CSS文件没有问题。

问题描述

• 我将FacesServlet映射到*.xhtml上： *.xhtml 如果我运行主页，在css中配置的菜单映像将不会加载。
• 当我移除*.xhtml上的*.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中的配置 Faces *.xhtml /javax.faces.resources/*
• 将图像放置在/resources/images目录下
• css文件中的图像访问格式 #menu {background: url(images/bg.png) }

Answer 1

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

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

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