1

私はjsfプロジェクトでいくつかのjquery関数を使用しており、この関数からプロジェクトのリソースフォルダから1つの画像を取得したい:

私はこれをテストしました：

$('.ui-datagrid-column').live('mousemove',function(){
            $(this).css('background-image', '../resources/images/vert_degrade.PNG');        

        });

しかし、画像ファイルが見つかりません

構造は次のとおりです。ここに画像の説明を入力

このファイルはページディレクトリにあります

どうすればこれを達成できますか

4

1 に答える 1

1

CSSbackground-imageプロパティで相対 URL を指定すると、現在リクエストされている JS コードを含むリソースのリクエスト URL に対して相対的になります。したがって、JS ファイルで宣言した場合は、JS ファイル自体のリクエスト URL に対して相対的になります。または、JSF ページで宣言した場合は、JSF ファイル自体のリクエスト URL に対して相対的です。ほとんどのスターターが誤って想定しているように、サーバー側のディスクファイルシステムパスの物理的な場所に相対的ではありません。

したがって、あなたの場合、その相対 URL は明らかに間違っています。JSF Web アプリケーションでは、とりわけ、JSF リソース ハンドラの URL プレフィックス/javax.faces.resourceや、faces サーブレット マッピングでさえも/faces/*、相対 URL が間違って解決される可能性が最も高い原因です。リクエスト URL を調べて、そこから適切な相対 URL を抽出する必要があります。

または、その JS コードが JSF ページ内<script>または<h:outputScript>JSF ページ内にある場合は、EL で暗黙的な#{resource}マッピングを使用して、リソース識別子を完全なリソース URL に変換することもできます。

例えば

<h:outputScript>
    $('.ui-datagrid-column').live('mousemove',function(){
        $(this).css('background-image', '#{resource['images/vert_degrade.PNG']}');        
    });
</h:outputScript>

<h:outputStylesheet>CSS ファイル内の EL 式の評価をサポートするため、ロードされるスタンドアロンの CSS ファイルで CSS 宣言を作成する方がはるかに優れています。

.vert-degrade {
    background-image: url('#{resource['images/vert_degrade.PNG']}');
}

と

$('.ui-datagrid-column').live('mousemove',function(){
    $(this).addClass('vert-degrade');
});

JS コードを独自の JS ファイルに保持できるようにします。

于 2013-04-12T15:08:25.540 に答える