與Primefaces

CSS URL（）訪問圖像這是從Primefaces文檔：與Primefaces

按鍵圖標

上的按鈕的圖標使用 CSS和圖像屬性顯示。

<p:commandButton value=」With Icon」 image=」disk」/> 

<p:commandButton image=」disk」/>

.disk是一個簡單的CSS類與背景屬性：

.disk { 背景圖片：URL（「disk.png」）重要; }

我的問題是：這個url（）指向哪裏？換句話說，我應該在哪裏放置圖像以便CSS可以訪問它？

我試過/ resources，/ resources/img，沒有運氣。是的，它使用絕對URL（包含上下文路徑），但這會使應用程序不可移植。

來源

2010-07-24 egbokul

它看起來像你的問題更關注的是事物的客戶端方面，所以儘管我不知道Primefaces，在這裏回答它是一個刺：

CSS路徑是相對的位置聲明CSS規則的地方。

如果這是在您的HTML中（<風格>塊），那麼disk.png必須與您的文件在同一個目錄中。

如果此規則位於單獨的CSS文件中，則disk.png應位於CSS文件所在的目錄中。

如果您創建了一個目錄圖片，那麼該目錄也將相對來自CSS。

希望這會幫助嗎？

來源

2010-07-24 09:41:04 kander

賓果！ ;-）感謝你及時的答覆。 – egbokul 2010-07-24 12:15:49

不客氣:) – kander 2010-07-24 13:48:29

簡單的解決方案：

如果您正在使用JavaServer Faces 2.0，你就有機會把所有的資源特別設計的目錄中。所以，你需要在Web應用程序在此文件夾結構：

-rootdir 
--resources 
---images 
----disk.png

，並接收在CSS背景圖片，你須是這樣的：

.disk { 
background: url(#{resource['images/disk.png']}) !important; 
}

來源

2011-02-01 16:02:12

謝謝你做到了！ – 2013-12-11 19:37:56

我面臨同樣的問題了一會兒，我估計它的文檔還不清楚！是這樣工作的Primefaces命令按鈕和類似（菜單項，子菜單等）：

我所做的是：

下載從主題庫中的主題PrimeFaces網站（例如：ARISTO或微軟）。
解壓縮歸檔到Web應用程序資源文件夾，（在我的情況：
請注意，在ARISTO文件夾中有根/資源/ CSS/ARISTO：theme.css和/圖像文件夾中索引的PNG圖像包含由主題使用的所有圖標

如果打開theme.css你會發現，訪問索引圖像圖標，你應該叫兩個類：的.ui圖標和的.ui -icon-theiconyouwant（.ui-icon使用檢索索引png和.ui-icon-agivenicon通過其在圖像中的X位置（索引）的X &劃分圖標。

現在通過使用**<h:outputStyleSheet />**.將theme.css輸出到您的應用程序中，最好的方法是在您的模板標籤之間。
在你的XHTML或JSP
所以，做**<p:commandButton image="ui-icon ui-icon-someicon"} />**.

現在如果你想增加你的個人形象與<p:commandButton使用，在theme.css創建類：

.smiley { 背景圖像： url（「＃{resource ['images/smiley.png']}」）！important;/如果不兼容，Internet Explorer將忽略此項/ width：16px; height：16px; }

通常情況下，JSF會訪問資源文件夾中可用的第一個圖像文件夾。

現在做：<p:commandButton image="smiley" value="Smile" />

來源

2011-06-14 08:41:28 Hanynowsky

回答

相關問題