从JSF 2.0中的CSS资源中加载图像

Question

我是JavaServer Faces的新手,我正在尝试执行以下操作:

模板文件"/template.xhtml"使用加载样式表

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

在那个CSS文件中我想链接到这样的图像:

... background-image: url(LINK_TO_MY_IMAGE) ...

如何引用该图像(我应该写入LINK_TO_MY_IMAGE)？我已经尝试使用直接链接(/contextroot/resources/images/foo.png)和JSF资源表示法(/contextroot/faces/javax.faces.resource/foo.png?ln=images).

我的目录结构:

/resources/images  => contains image files
/resources/style/default.css
/WEB-INF/web.xml
/WEB-INF/faces-config.xml
/template.xhtml
/demoPage.xhtml  => uses the template.xhtml

所以,到目前为止,我的问题是我总是得到一个"404 Not Found"来加载图像.

Answer 1

经过多次实验,这在CSS中起作用:

url("msgError.gif.xhtml?ln=images")

在上面,msgError.gif是我的资源位于/resources/images/msgError.gif我相信.xhtml只是用来使用JSF FacesServlet(参见web.xml)

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

"ln"是库名.

Answer 2

将css添加到您的XHTML中

<link href="#{facesContext.externalContext.requestContextPath}/resources/style/default.css" rel="stylesheet" type="text/css" />

在CSS中

background-image: /resources/images/someName.png