从 JSF 2.0 中的 CSS 资源中加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5429967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load Images from within CSS resources in JSF 2.0
提问by Jan Bunschoten
I am new to JavaServer Faces and I'm trying to do the following:
我是 JavaServer Faces 的新手，我正在尝试执行以下操作：
The template file "/template.xhtml" loads a stylesheet using
模板文件“/template.xhtml”使用
<h:outputStylesheet library="style" name="default.css" />
Within that CSS file I want to link to images like so:
在那个 CSS 文件中，我想链接到这样的图像：
... background-image: url(LINK_TO_MY_IMAGE) ...
How do I reference that image (what should I write into LINK_TO_MY_IMAGE)? I already tried to use the direct link (/contextroot/resources/images/foo.png) and the JSF resources notation (/contextroot/faces/javax.faces.resource/foo.png?ln=images).
如何引用该图像（我应该在 LINK_TO_MY_IMAGE 中写入什么内容）？我已经尝试使用直接链接（/contextroot/resources/images/foo.png）和 JSF 资源符号（/contextroot/faces/javax.faces.resource/foo.png?ln=images）。
My directory structure:
我的目录结构：
/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
So, my problem so far is that I always get a "404 Not Found" for loading that images.
所以，到目前为止，我的问题是我总是在加载该图像时收到“404 Not Found”。
采纳答案by Jigar Joshi
Add css into your XHTML
将 css 添加到您的 XHTML 中
<link href="#{facesContext.externalContext.requestContextPath}/resources/style/default.css" rel="stylesheet" type="text/css" />
and in CSS
并在 CSS 中
background-image: /resources/images/someName.png
回答by Domenic D.
After much experimentation this works in the CSS:
经过大量实验，这在 CSS 中有效：
url("msgError.gif.xhtml?ln=images")
url("msgError.gif.xhtml?ln=images")
In the above, msgError.gif is my resource located at /resources/images/msgError.gif I believe the .xhtml is just used to use the JSF FacesServlet (see web.xml)
在上面，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>
The "ln" is the library name.
“ln”是库名。
回答by Steve Jones
I don't know why there are so many different ways... but here is another path that works with inline CSS.
我不知道为什么有这么多不同的方法......但这里有另一个适用于内联 CSS 的路径。
<div style="background-image: url('/javax.faces.resource/images/someName.png.xhtml');">
Text to Display
</div>
回答by user853553
SASS (SCSS) mixin
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}']})";
}
Usage:
用法：
background: resource_url('img/footer_trenner.gif') no-repeat center left;
