jsf模板中的背景url路径答案

【问题标题】：Background url path in a jsf templatejsf模板中的背景url路径
【发布时间】：2012-08-23 09:49:23
【问题描述】：

我在这里遇到了麻烦。我有一个 JSF 应用程序，它有一个名为 baseTemplate.xhtml 的模板文件。该文件位于 /resources/template 文件夹中。文件代码如下：

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css"/>
        <h:outputStylesheet library="css" name="cssLayout.css"/>
        <h:outputStylesheet library="css" name="menu.css"/>
        <h:outputStylesheet library="css" name="rodape.css"/>
        <title>JSF Project</title>
    </h:head>
    <h:body>
        <div id="estrutura">
            <div class="top">
                <ui:insert name="top">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
            <div id="menu">
                <ui:insert name="menu">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
            <div>
                <div id="left">
                    <ui:insert name="left">
                    </ui:insert>
                </div>
                <div id="content" class="left_content">
                    <ui:insert name="content"></ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="somefile"/>
                </ui:insert>
            </div>
        </div>    
      </h:body>
</html>

在我的 cssLayout.css 文件中，位于 /resources/css 文件夹中，我有以下规则：

.top {
   position: relative;
   height: 120px;
   padding: 0;
   margin: 0 0 15px 0;
   background-image: url('imgSite/sisLogo.png');
   background-repeat: no-repeat;
}

图像 sisLogo.png 位于 /resources/css/imgSite 下。我的应用中的所有页面都在 /pages 内。当我使用模板时，他没有为 top 加载图像背景，而是加载了其他 css 属性。似乎是背景图片 url 路径问题。我该如何解决这个问题？

项目文件夹结构如下：

/
 pages/
     home.xhtml (using the template)
 resources/
     css/
         cssLayout.css
         imgSite/
             sisLogo.png
     templates/
         baseTemplate.xhtml

【问题讨论】：

看这个答案stackoverflow.com/questions/6835499/…

标签： css jsf

【解决方案1】：

CSS 背景图片是相对于 CSS 文件的请求 URL 加载的（因此不会直接相对于其在网络内容中的物理位置）。如果您浏览<h:outputStylesheet> 生成的HTML 输出，您会看到请求URL 已经变得不同。假设上下文路径为/somecontext，而FacesServlet 映射为*.xhtml，则如下所示：

<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />

请注意，您对 library 的使用 (improper btw) 已将 /css 移至 ?ln=css。您需要相应地修复背景图像url()，以便它正确地相对于 CSS 的真实请求 URL。例如

background-image: url("../resources/css/imgSite/sisLogo.png");

考虑到JSF资源标识符规则和FacesServlet映射的更可靠的方法是在EL中使用#{resource}：

background-image: url("#{resource['css:imgSite/sisLogo.png']}");

另见：

【讨论】：

如何解析外部CSS文件中的#{resource['css:imgSite/sisLogo.png']}等EL表达式？ CSS 文件本身是否与 XHTML 文件一起解析（从上到下）？这是不是有点神奇？到目前为止，我在 external JavaScript files 的情况下设想了不同的事情，其中既不需要转义 XML 特殊字符，也不需要将这些文件中的代码包含在丑陋的 CDATA 标记中（ s) - 因为外部 JavaScript 文件中的代码只是包含在生成的 HTML 中 - 文件本身没有被解析。是吗？
@Tiny：外部 CSS 文件不支持它。它仅支持由同一个 webapp 提供的内部 CSS 文件。 JS 文件不以任何方式支持它（尽管它也很好）。 EL 评估是通过一个特殊的输入流读取器完成的，该读取器识别#{..}，然后通过当前的面孔上下文评估它们。请注意，CSS 文件中是否存在 EL 仅在每个 CSS 文件应用程序范围内检查一次。如果在 CSS 中没有找到 EL，那么 JSF 会继续以常规方式读取它。
@BalusC 有没有办法指向整个文件夹，而不是单个文件？我在使用 Google Developers 的 MarkClusterer 时遇到问题，它的一个选项指向图像所在的文件夹，我不知道该怎么做我尝试了 "#{resource['img:m']}" where img 和 m 是文件夹

【解决方案2】：

你的情况很简单。我复制它：

/
 pages/
     home.xhtml (using the template)
 resources/
     css/
         cssLayout.css
         imgSite/
             sisLogo.png
     templates/
         baseTemplate.xhtml

小贴士：当你不知道如何使用相对路径或当你实现它时遇到问题，只需使用绝对路径。 绝对路径在某些情况下具有强大的优势可以从根上测量。所以它们更简单。

在您的情况下，无论结构如何，您都可以这样做：

/您的项目名称/PathToTheImage

示例：（假设您的项目名为“NewYork”。这只是一个名称！您应该这样做）

/NewYord/resources/css/imgSite/sisLogo.png

我想你知道你必须在 jsf 代码中包含 css 路径。

示例：（在您的情况下，您必须将其放在需要此 css 的代码 xhtml 中）

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

希望帮助。

谢谢

【讨论】：