JSFのresourceバージョニング対応の記述について

Question

バージョニングに対応してなかったので対応させたところ、
CSSリソース内の画像が表示されなくなり困っております。
正しい記述をご存知の方、ご教示をお願いします。
尚、当然ながら対応前はちゃんと表示されておりました。

■バージョニング対応前
resources
+-- css
| +-- common.css
+-- images
+-- icon.png

common.cssでの定義
background: url('../images/icon.png');

test.xhtmlでの定義
<h:outputStylesheet name="css/common.css"/>

■バージョニング対応後
resources
+-- default
+-- 1_0
+-- css
| +-- common.css
+-- images
+-- icon.png

common.cssでの定義
background: url("#{resource['default:images/icon.png']}");

test.xhtmlでの定義
<h:outputStylesheet library="default" name="css/common.css"/>

Answer 1

以下のフォルダ配置と、CSS,xhtmlの記載でいかがでしょうか。
※imageもヴァージョニング対象とするよう書き直しました。

resources
+-- css
+--1_0
+-- common.css
+-- images
+-- icon.png

common.cssでの定義
background: url('images/icon.png');

test.xhtmlでの定義
<h:outputStylesheet library="css" name="common.css"/>

---

簡単に検証しましたので、結果を踏まえて追記します。
上記の方法では画像は表示できませんでした。表示させるには以下に配置変更が必要でした。

resources
+-- css
| +--1_0
| +-- common.css
+-- images
+-- icon.png

バージョニングによるcssファイル内のurl参照先の変更はできませんでした。画像を変更したいのであれば、imagesフォルダには別ファイル名(icon2.pngなど)で配置し、cssのurlはそのファイルを指すよう変更する用法になるかと思います。もっと最適な方法は有るかも知れませんが、調べ思い付いた範囲で回答させて頂きます。

Comments

[yoshi7]

回答ありがとうございます。
とても参考になりました。
imagesもバージョニング対象にする場合、
imagesフォルダはcssフォルダ内に入れるしか方法はないもんでしょうか？
(cssから参照しない画像の方が多いので)
imagesフォルダを２つに分けるしか方法はないのかな・・・。

[BlueMoon]

cssファイルからの参照でかつバージョニング対象にしたいのであれば、ナンバリングフォルダ配下にするのかなと思います（２つに分ける）。混同を避けたいのであれば、ナンバリングフォルダ配下はフォルダ名を変更（img,commonImagesなど）されてはどうでしょうか。

[yoshi7]

ありがとうございました。
フォルダを２つに分けて対処しようと思います。

[yoshi7]

作業が立て込んでいて実装が今日になったんですが、
画像が表示されませんでした。
BlueMoonさんは表示されました？

[BlueMoon]

参考書ベースで回答しましたので、実際に試していません。解答にその旨記載せず、失礼いたしました。

[BlueMoon]

回答に追記しました。

[yoshi7]

common.cssでの定義
background: url("#{resource['images:/icon.png']}");

上記のようにすることで表示できました。
また、フォルダを２つ分けなくても良くなりました。
(cssフォルダ内にimgesフォルダを設けない)