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 =图像）。

我的目录结构：

/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;

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

4 个答案: