无法在 JSF 中加载 CSS 图像答案

【问题标题】：Can't loading CSS images in JSF无法在 JSF 中加载 CSS 图像
【发布时间】：2013-08-31 02:46:57
【问题描述】：

说明： 在我的 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文件没有问题

问题描述

我将 FacesServlet 映射到 *.xhtml：

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

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

当我删除*.xhtml 上的FacesServlet 映射配置时图像正在完美加载

我试过了

我在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>

FacesServletweb.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) }

【问题讨论】：

background:url("../resources/images/default.gif");怎么样
安装火狐。安装萤火虫。打开萤火虫。转到您的页面并检查生成的代码。 .css 真的包括在内吗？能找到文件吗？你的菜单有正确的类别吗？图片路径是否正确？图片找到了吗？我相信您可以使用正确的工具自行缩小问题范围...
@Daniel 我按照你说的尝试过，仍然没有加载，我在web.xml 中发现的问题，配置 facesServelet .xhtml 映射，如果我删除它，它工作得很好。我怎么能实现这一目标..
@noone 与浏览器端无关的问题，当然图片在我上面提到的正确路径
@kark ，这是你的答案stackoverflow.com/a/15000857/617373 阅读所有内容......并检查一下showcase.omnifaces.org/resourcehandlers/UnmappedResourceHandler

标签： css jsf jsf-2

【解决方案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

【讨论】：