3

我在这里遇到了麻烦。我有一个 JSF 应用程序，它有一个名为baseTemplate.xhtml的模板文件。该文件位于 /resources/template 文件夹中。遵循文件代码：

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css"/>
        <h:outputStylesheet library="css" name="cssLayout.css"/>
        <h:outputStylesheet library="css" name="menu.css"/>
        <h:outputStylesheet library="css" name="rodape.css"/>
        <title>JSF Project</title>
    </h:head>
    <h:body>
        <div id="estrutura">
            <div class="top">
                <ui:insert name="top">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
            <div id="menu">
                <ui:insert name="menu">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
            <div>
                <div id="left">
                    <ui:insert name="left">
                    </ui:insert>
                </div>
                <div id="content" class="left_content">
                    <ui:insert name="content"></ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
        </div>    
      </h:body>
</html>

在位于 /resources/css 文件夹内的cssLayout.css文件中，我有以下规则：

.top {
   position: relative;
   height: 120px;
   padding: 0;
   margin: 0 0 15px 0;
   background-image: url('imgSite/sisLogo.png');
   background-repeat: no-repeat;
}

图像 sisLogo.png 位于 /resources/css/imgSite 下。我的应用程序中的所有页面都在/pages内。当我使用模板时，他不会为top加载图像背景，但会加载其他 css 属性。似乎是背景图片 url 路径问题。我怎么能解决这个问题？

项目文件夹结构如下：

/
 pages/
     home.xhtml (using the template)
 resources/
     css/
         cssLayout.css
         imgSite/
             sisLogo.png
     templates/
         baseTemplate.xhtml
4

2 回答 2

8

CSS 背景图像是相对于 CSS 文件的请求 URL加载的（因此不会直接相对于其在 Web 内容中的物理位置）。如果您浏览 生成的 HTML 输出<h:outputStylesheet>，您会看到请求 URL 已变得不同。假设 的上下文路径/somecontext和 的FacesServlet映射*.xhtml，它看起来像这样：

<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />

请注意，您（不正确的顺便说一句）对 的使用library已/css移至?ln=css. 您需要url()相应地修复背景图像，以便它与 CSS 的真实请求 URL 正确相关。例如

background-image: url("../resources/css/imgSite/sisLogo.png");

FacesServlet将 JSF 资源标识符规则和映射考虑在内的更可靠的方法是#{resource}在 EL 中使用：

background-image: url("#{resource['css:imgSite/sisLogo.png']}");

也可以看看：

于 2012-08-29T10:59:03.677 回答
0

你的情况很简单。我复制它：

/
 pages/
     home.xhtml (using the template)
 resources/
     css/
         cssLayout.css
         imgSite/
             sisLogo.png
     templates/
         baseTemplate.xhtml

小贴士：当你不知道如何使用相对路径或实现起来有问题时，只需使用绝对路径即可。在某些情况下，绝对路径具有强大的优势，可以从根开始测量。所以它们更简单。

在您的情况下，无论结构如何，您都可以这样做：

/您的项目名称/PathToTheImage

示例：（假设您的项目名为“NewYork”。这只是一个名称！您应该这样做）

/NewYord/resources/css/imgSite/sisLogo.png

我想你知道你必须在 jsf 代码中包含 css 路径。

示例：（在您的情况下，您必须将其放入需要此 css 的代码 xhtml 中）

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

希望有所帮助。

谢谢

于 2015-04-24T13:51:30.940 回答