Question

我在这里遇到了麻烦。我有一个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 中。当我使用模板时，他没有加载顶部的图像背景，但是加载了其他css属性。似乎是背景图像网址路径问题。我怎么能解决这个问题？

项目文件夹结构如下：

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

Answer 1

相对于CSS文件的请求URL 加载CSS背景图像（因此不会立即相对于其在Web内容中的物理位置）。如果您浏览<h:outputStylesheet>生成的HTML输出，那么您将看到请求网址已变得不同。假设/somecontext的上下文路径和FacesServlet的{{1}}映射，它将如下所示：

*.xhtml

请注意，<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />对library}的使用已将/css移至?ln=css。您需要相应地修复背景图像url()，以使其正确相对于CSS的实际请求URL。 E.g。

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

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

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

另见：

Answer 2

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

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

小相关建议 ： 当您不知道 如何使用相对路径或 < em>当您遇到问题 时，只需使用 绝对路径 。 绝对路径 在某些情况下具有强大的优势从根进行调整。所以它们更简单。

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

/您的项目名称/ PathToTheImage

例如:(假设你的项目被称为 ＆＃34; NewYork＆＃34; 。它只是一个名字！你应该做）

<强> /NewYord/resources/css/imgSite/sisLogo.png

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

例子:(在你的情况下，你必须把它放在需要这个css的代码xhtml中）

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

希望有所帮助。

由于

在jsf模板的背景url道路

2 个答案:

另见：