web-dev-qa-db-ja.com

JSF画像リソースをCSS背景画像URLとして参照する方法

画像属性を使用してボタンの画像を変更することがよくありますが、誰かが私が試した.cssを使用してそれを行うことは良い習慣であると言ったが、私はできません、私は間違っていますか？これは私がやったことです：

1-プロジェクトのリソースは次のように保存されます：

enter image description here

2-これは、イメージにアクセスするためのstyle.cssの作成方法です

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

-これは、ページの本文からcssにアクセスする方法です（同じドキュメント内の他のクラスがこのページの他のタグで機能するため、これは正しいと確信しています）

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

4-これは、適切なcssクラスを使用するサンプルcommandButtonを作成する方法です

<h:commandButton styleClass="c2"/>

私は問題が.cssにあると思う、私はいくつかの組み合わせを試しましたが、どれもうまくいきませんでした：

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg);

間違いはどこですか？

更新 私は次のコードでそれを機能させることができました：

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

Css（右）を使用するときと画像属性（左）を使用するときの違いに注意してください

enter image description here

ホールド画像が表示されるようにこれを解決するにはどうすればよいですか？

cssjsfjsf-2resourcesbackground-image
34
sfrj

_<h:outputStyleSheet>_でCSSスタイルシートをインポートすると、スタイルシートはFacesServletから_/javax.faces.resource/*_までインポートされ、処理されます。問題のスタイルシートを指す生成された_<link>_要素を見てください。理解できます。

代わりに_#{resource['library:location']}_を使用するには、すべてのurl()依存関係を変更する必要があります。 JSFは、正しいパスで自動置換します。フォルダー構造を考えると、置き換える必要があります

_.c2 {
    background: url("/resources/images/smiley.jpg");  
}
_

沿って

_.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}
_

Webappコンテキスト名がplaygroundであり、FacesServletが_*.xhtml_にマッピングされていると仮定すると、上記は次のように返されたCSSファイルになります。

_.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
_

JSF実装は、EL式が含まれている場合、CSSファイルの最初の要求時にのみ決定することに注意してください。そうでない場合、効率のためにCSSファイルのコンテンツをEL評価しようとしなくなります。そのため、初めてCSSファイルにEL式を追加する場合、JSFにCSSファイルを再確認させるには、アプリケーション全体を再起動する必要があります。

PrimeFacesなどのコンポーネントライブラリからリソースを参照する場合は、_:_で区切られたライブラリ名にプレフィックスを付けます。例えば。 _primefaces-start_で識別されるPrimeFacesの「開始」テーマを使用している場合

_.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}
_

これは次のように生成されます

_.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}
_

こちらもご覧ください：

具体的な問題とは無関係、libraryの使用方法は完全には正しくありません。これは、関連するすべてのCSS/JS /イメージリソースの共通識別子/サブフォルダーになることを意図しています。重要な考え方は、library（ELで実行可能）を変更するだけで、ルックアンドフィール全体を変更できるようにすることです。ただし、defaultライブラリに依存しているようです。その場合、_<h:outputStylesheet>_および_#{resource}_からlibraryを省略できます。

_<h:outputStylesheet name="css/style.css"  />
_

こちらもご覧ください：

67
BalusC

私はこれに少し苦労したので、BalusCはすでに質問に答えていますが、なぜこれが起こっているのかについてコメントできるかもしれません。バンドルされたWARプロジェクトとEJBプロジェクトで構成される5つのEARプロジェクトがあります。次に、1つのスタンドアロンWARプロジェクトを単独でデプロイします。次のコードは、すべてのEARで完璧に機能しました。

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

「img」フォルダーはWEB-INFフォルダー内にありますが、EARプロジェクトの場合は機能せず、URLを手動で入力してもブラウザーに画像をロードしません。結果のHTMLが100％正確であることを確認しました。それで、「リソース」のすべての話は、おそらくそれが「セキュリティ」であると考えさせられました。 WARデプロイメントとEARデプロイメントの間に意味をなさないように思われる何らかの問題のため、Webアプリケーションのルートに「リソース」フォルダーを作成しました。 Eclipseでは、その親はWebContentになり、「img」というリソースにサブフォルダーを追加して、そこに画像を配置しました。

コードは次のようになります。

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

そして今、画像が表示されます。再びbaluscの完全な答えをハイジャックしようとせず、誰かが同様の問題に遭遇した場合に備えてそれを持ち出したかっただけです。誰かが別のQとAを開くことを望んでいる場合、私はします！

ああ、これはJBoss EAP 7、Servlet API 3.1、Facelets 2.2、Rich Faces 4.5.17 Java 1.8。

Edit@ Basil-Bourque answer Java EE Webアプリケーションで使用されるWEB-INFとは かなり関連があるようです

しかし、EAR内のWARがスタンドアロンWARではなくその場所にアクセスできるという点で、まだ少し混乱しています。

0
JGlass