使用 h:outputStylesheet 时未呈现图像

Question

我正在使用 JSF 2.0 资源管理机制。在 /webapp/resources 下，我有 3 个子文件夹：图像、脚本、样式。在我的模板文件 myLayout.xhtml 中，我引用了如下样式表

    <h:outputStylesheet name="styles/styles.css"/>

我把我所有的背景图片都放在了我的styles.css文件中，如下所示：

    body {
           background: #fff url(../images/body_background.png) repeat -x;
    }

    #header {
           background: transparent url(../images/header_bg.png) no-repeat top right;
    }

我的所有页面 facelets 都位于 /webapp/facelets 子文件夹下，而模板文件位于 /webapp/template 下。我的 facelet page.xhtml 引用模板如下：

   <ui:compsition .... template="/template/myLayout.xhtml">

然后页面布局正确，但缺少所有背景图像。我查看了日志，发现如下错误：

    java.io.FileNotFoundException: SRVE0190: File not found: /javax.faces.resource/images/body_background.png
    java.io.FileNotFoundException: SRVE0190: File not found: /javax.faces.resource/images/header_bg.png

然后我将css文件中的url引用从

    url(../images/body_background.png)

到 网址(/i

Answer 1

您需要通过 EL 中的#{resource} 引用 CSS 图像资源，以便它打印正确的 JSF 资源 URL。

body {
    background: #fff url(#{resource['images/body_background.png']}) repeat -x;
}

#header {
    background: transparent url(#{resource['images/header_bg.png']}) no-repeat top right;
}