加載圖像在JSF 2.0

我是新來的JavaServer Faces和我試圖做到以下幾點：加載圖像在JSF 2.0

模板文件「/template.xhtml」加載使用

<h:outputStylesheet library="style" name="default.css" />

樣式表

在這一CSS文件我想鏈接到的圖像，像這樣：

... background-image: url(LINK_TO_MY_IMAGE) ...

如何引用圖像（我應該怎麼寫進去LINK_TO_MY_IMAGE）？我已經嘗試使用直接鏈接（/contextroot/resources/images/foo.png）和JSF資源記法（/contextroot/faces/javax.faces.resource/foo.png?ln=images）。

我的目錄結構：

/resources/images => contains image files 
/resources/style/default.css 
/WEB-INF/web.xml 
/WEB-INF/faces-config.xml 
/template.xhtml 
/demoPage.xhtml => uses the template.xhtml

所以，到目前爲止，我的問題是，我總是得到一個「404未找到」加載的圖像。

來源

2011-03-25 Jan Bunschoten

添加CSS到您的XHTML

<link href="#{facesContext.externalContext.requestContextPath}/resources/style/default.css" rel="stylesheet" type="text/css" />

和CSS

background-image: /resources/images/someName.png

來源

2011-03-25 08:17:54

你是對的，謝謝。我只是在我的CSS文件中有一個錯字 – 2011-03-25 09:59:24

但是...在開始時添加「/」不會將此引用爲上下文根y Tomcat？我的意思是。如果您的應用程序部署在/myapplication下，該解決方案是否可以工作？在此先感謝 – frandevel 2011-11-30 22:38:19

多次實驗這部作品在CSS後：

url("msgError.gif.xhtml?ln=images")

在上面， msgError.gif是我的資源位於/resources/images/msgError.gif 我相信.xhtml只是用來使用JSF FacesServlet的（見web.xml中）

<servlet-mapping> 
    <servlet-name>FacesServlet</servlet-name> 
    <url-pattern>*.xhtml</url-pattern> 
</servlet-mapping>

的「LN」是庫名稱。

來源

2011-08-17 03:50:09

+14

您應該使用'＃{resource}'。另見http://stackoverflow.com/questions/6925733/changing-the-image-of-a-hcommandbutton-using-css/6926193#6926193 – BalusC 2011-08-17 11:10:09

感謝您的提示和鏈接！ – 2012-01-10 03:30:40

我不知道爲什麼有這麼多不同的方式......但這裏是另一種與內聯CSS一起工作的路徑。

<div style="background-image: url('/javax.faces.resource/images/someName.png.xhtml');"> 
    Text to Display 
</div>

來源

2013-04-26 16:21:57

SASS（SCSS）混入

//----------------------------------------------------------------------------- 
// resource_url function returns the parameter as url(#{resource['<parameter>']}) 
// and should be used instead of CSS url() or compass image_url() in JSF applications. 
// Define JSF Resource Library resource['standard: 

@function resource_url($url) { 
    @return url + "(\#{resource['test:#{$url}']})"; 
}

用法：

background: resource_url('img/footer_trenner.gif') no-repeat center left;

來源

2014-09-05 13:15:32 user853553

加載圖像在JSF 2.0

回答

相關問題