Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

graphicImageタグで指定した画像がChromeで上手く表示されないケースに遭遇

PrimeFacesのExtensionにあるBlockUIはブロックしてる壁の上にコンポを置けるので、アニメーションgifでクルクル回るものと「処理中」ラベルを置いたりしています。

が、なぜかGoogle Chromeでうまく表示されないケースがありました。
条件的には

  • PrimeFaces 3.5のgraphicImageを利用
  • 表示されないのはPFのcommandButtonを利用、かつajax=falseのもの

(ちなみに普通のh:graphicImageも同様でしたが)

  • PrimeFaces Extension 0.6.3のBlockUIを利用
  • Google Chromeはバージョン 27.0.1453.94m

(複数台のマシンで同じだったのであまりバージョンは関係ないかも)

  • 画像はアニメーションgif、ただし、gif以外の画像などを指定しても同様でした

ぐらいかな…。

もともとJSFの定義では以下のように書いていました。

<p:graphicImage id="imgLoad" value="/resources/images/ajax-loader.gif" />

で、実行結果は

f:id:kikutaro777:20130530192545j:plain

他のブラウザ、例えばFirefoxでは以下のように出ます。

f:id:kikutaro777:20130530192604j:plain

IE、OperaSafariも正常に表示されて、なぜかChromeだけ…。

これは駄目かと諦めていたのですが、StackOverflowにこんなのが

How to render images in JSF 2.0

むむ、graphicImageにもいくつかの書き方があって、HTMLの出力も違うですとっ。

で、試しに

<p:graphicImage id="imgLoad" library="images" name="ajax-loader.gif" />

としたら動きました!!なにこれ。

ちなみに各々で出力されたHTMLの結果は

上手くいかなかったパターン

<p:graphicImage id="imgLoad" value="/resources/images/ajax-loader.gif" />

<img id="xxFrm:imgLoad" src="/XxService/resources/images/ajax-loader.gif" alt="" />

上手くいったパターン

<p:graphicImage id="imgLoad" library="images" name="ajax-loader.gif" />

<img id="xxFrm:imgLoad" src="/XxService/javax.faces.resource/ajax-loader.gif.xhtml?ln=images" alt="" />

うーむ。この結果から、なぜChromeだけ駄目になるのかイマイチわからない。奥が深い…。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村