3

ここで困っています。baseTemplate.xhtmlというテンプレート ファイルを持つ JSF アプリケーションがあります。このファイルは /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");

FacesServletJSF リソース識別子のルールとマッピングを考慮した、より信頼性の高い方法は#{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 に答える