CSS中的background-image：url（“”）：不加载outputStylesheet

Question

很抱歉，如果没有正确询问问题。图像在struts项目中显示得很好，但在JSF2项目中没有。所有的CSS和按钮都呈现良好except image that has url in css。

文件夹结构

resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png

bootstrap.min.css

background-image: url("../img/glyphicons-halflings.png");

1 - 如果我使用<h:outputStylesheet library="css" name="bootstrap.min.css"/>而不是背景图像，则生成的网址为http://localhost:8000/img/glyphicons-halflings.png，因此图片无法加载。它应该是http://localhost:8000/resources/img/glyphicons-halflings.png

2 - 如果我使用<link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/>而不是

Firefox - ＆gt; Firebug - ＆gt;网络标签{资源多次添加}

http://localhost:8000/resources/resources/img/glyphicons-halflings.png

不确定如何加载css中的图像并在课堂上应用。

将EDIT图标显示为点击下一页的链接。

 <h:outputLink value="edit.xhtml" >
                            <i class="icon-edit" ></i>
                            <f:param name="id" value="#{person.id}"/>
                        </h:outputLink>

Answer 1

您应该在CSS中使用EL变量#{resource}来指定图像资源。

background-image: url("#{resource['img/glyphicons-halflings.png']}");

另见：

• How to reference JSF image resource as CSS background image url