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

Question

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

模板文件“/template.xhtml”使用在该 CSS 文件中加载样式表

<h:outputStylesheet library="style" name="default.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=图像）。

我的目录结构：

/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

Answer 3

我不知道为什么有这么多不同的方法...但这是另一种与内联 CSS 一起使用的路径。

<div style="background-image: url('/javax.faces.resource/images/someName.png.xhtml');">
    Text to Display
</div>

Answer 4

SASS (SCSS) mixin

//-----------------------------------------------------------------------------
// resource_url function returns the parameter as url(#{resource['<parameter>']})
// and should be used instead of CSS url() or compass image_url() in JSF applications.
// Define JSF Resource Library resource['standard:

@function resource_url($url) {
  @return url + "(\#{resource['test:#{$url}']})";
}

用法：

background: resource_url('img/footer_trenner.gif') no-repeat center left;