2012-04-26 2 views
4

私はPrimefaces-applicationでレンダリングされたイメージを取得しようとしています。 これは、アコーディオンパネルの外に正常に動作している:JSF + Primefacesでイメージをレンダリングする方法3.2

<h:graphicImage library="images" name="testi.JPG" /> 

しかし、私はアコーディオンパネルの内側にそれを使用しようとすると、それはもはや機能していない:

<p:accordionPanel> 
    <p:tab title="Godfather Part I"> 
     <h:panelGrid columns="2" cellpadding="10"> 
      <h:graphicImage library="images" value="testi.JPG" /> 

Primefaces内の画像のためのタグがありますしかし、何のライブラリタグが全くありませんので、私は同様にすることを試みた:

<p:tab title="Godfather Part II"> 
     <h:panelGrid columns="2" cellpadding="10"> 
        <p:graphicImage url="/resources/images/testi.jpg" /> 

だから、誰かがどのようにそれを行うために私に言うことができるし、それを行うための正しい方法があるため、何ですさまざまな選択肢がありますが、私の場合は何も働いていませんか?どのようにアプリケーションに普遍的な画像フォルダのように追加することができますか、どこにパスがありませんか?

<?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"> 
<head><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/theme.css?ln=primefaces-flick" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.2" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;v=3.2" /><script type="text/javascript" src="/temp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;v=3.2"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Primefaces Template</title></head><body> 

ソースを表示はできます: これは、アコーディオンパネルの外にあると、それが働いている:

<h:graphicImage library="images" name="testi.JPG" /> 

---------------- ---> HTML:使用してアコーディオンパネルで

<img src="/temp/faces/javax.faces.resource/testi.JPG?ln=images" /> 

パネルの外で働いているコードの同じ行:

<p:tab title="Godfather Part I"> 
     <h:panelGrid columns="2" cellpadding="10"> 
      <h:graphicImage library="images" value="testi.JPG" /> 
      <h:outputText value="The story begins as Don Vito Corleone, 

------------------> HTML:

<td><img src="testi.JPG" /></td> 
<td>The story begins as Don Vito Corleone, 

使用Primefacesタグ:

<p:tab title="Godfather Part II"> 
     <h:panelGrid columns="2" cellpadding="10"> 
        <p:graphicImage url="/resources/images/testi.jpg" /> 

-----------------> HTML:

<td><img id="j_idt29:j_idt32" src="/temp/resources/images/testi.jpg" alt="" /></td> 

編集:これは機能していますが、なぜですか?

<h:graphicImage value="#{resource['images:testi.JPG']}"/> 

リソースなしS!

ありがとうございました! サミ

+0

をあなたが提供したコードは動作するはずです(画像パスが正しい場合)。 Primefacesショーケースと同じです。もう少しコードを投稿できますか(少なくともページのヘッダーと完全なaccordionPanel)。 –

+0

さらにコードとヘッダとソースのHTMLコードを追加しました。ショーケースと全く同じですし、私の画像はresources/images /にあります。 – Sami

答えて

14

あなたの間違いは、あなたの代わりにname属性のvalue属性を使用したことである:

<h:graphicImage library="images" value="testi.JPG" /> 

リソースを参照する場合、あなた代わりname属性を使用する必要があります。

<h:graphicImage library="images" name="testi.JPG" /> 

value属性は、リソース名ではなくURLを指します。具体的な問題へ


無関係

は、あなたが完全に正しく library属性を使用する方法を理解していません。イメージ、CSS、およびJSファイルを互いに分離することは意図されていません。ここには、 <h:graphicImage><h:outputStylesheet><h:outputScript>というタグの唯一のタグがあります。 library属性は、イメージ/ CSS/JSファイルが外部JARファイルに格納されているモジュラーWebアプリケーションで使用されると想定されています。 libraryアトリビュートを使用すると、それらのバージョンを変更したり、メインのwebappでオーバーライドすることができます。あなたの <h:graphicImage>を削除する修正も What is the JSF resource library for and how should it be used?

を参照してください。その間違ったlibrary属性の使用方法:

<h:graphicImage name="images/testi.JPG" /> 

それとも内のすべてのリソースを置くfullworthy Webアプリケーション固有のライブラリを導入する:から

<h:graphicImage library="default" name="images/testi.JPG" /> 
+0

ありがとう! Sami

+0

最後はうまくいかなかった、あるいは間違っていたが、それ以外はそれ以外のことはなかった。私はこれを意味します: Sami

+0

'#{resource}'は与えられたリソース名をURLに変換します。最後の例では、 'images'フォルダを' default'という名前の別のフォルダに置きます。したがって: '/ resources/default/images/testi.JPG'。新しいバージョンをお持ちの場合は、たとえば次のように作成できます。 '/ resources/default/1_1/images/testi.JPG'とJSFリソースハンドラが自動的にサービスを提供します。 – BalusC

関連する問題