jsf模板中的背景url路径 [英] Background url path in a jsf template
问题描述
我在这里麻烦。我有一个JSF应用程序，它有一个名为 baseTemplate.xhtml 的模板文件。此文件位于/ resources / template文件夹中。遵循文件代码：
i'm in trouble here. I have a JSF application that has a template file called baseTemplate.xhtml. This file is located in /resources/template folder. Follows the file code:
<?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文件夹，我有以下规则：
In my cssLayout.css file, located inside /resources/css folder, i have the following rule:
.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 中。当我使用模板时，他不加载顶部的图像背景，但加载其他CSS属性。似乎是一个背景图像url路径问题。如何解决这个问题？
The image sisLogo.png is located under /resources/css/imgSite. All pages from my app are inside /pages. When i use the template, he doesn't load the image background for top, but other css properties are loaded. Seems to be a background-image url path problem. How i could solve this?
项目文件夹结构如下：
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
推荐答案
CSS背景图片相对于CSS文件的请求网址加载（因此不会立即相对于网页内容中的实际位置）。如果您探索< h：outputStylesheet> 的生成的HTML输出，则您会看到请求网址已变得不同。假设 / somecontext 和 FacesServlet 的上下文路径 *。xhtml ，它将如下所示：
CSS background images are loaded relative to the request URL of the CSS file (and thus not immediately relative to its physical location in the web content). If you explore the generated HTML output of the <h:outputStylesheet>, then you'll see that the request URL has become different. Assuming a context path of /somecontext and a FacesServlet mapping of *.xhtml, it'll look like this:
<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />
请注意，您的（库的使用 >已将 / css 移动到？ln = css 。您需要相应地修复背景图片 url（），使其相对于CSS的实际请求网址正确。例如
Note that your (improper btw) usage of the library has moved the /css to ?ln=css. You'd need to fix the background image url() accordingly so that it's properly relative to the real request URL of the CSS. E.g.
background-image: url("../resources/css/imgSite/sisLogo.png");
一种更可靠的方法，它接受JSF资源标识符规则和 FacesServlet 映射到帐户，是在EL中使用＃{resource} ：
A more reliable way, which takes JSF resource identifier rules and FacesServlet mapping into account, is to use #{resource} in EL:
background-image: url("#{resource['css:imgSite/sisLogo.png']}");
另请参阅：
- 将JSF前缀更改为后缀映射会强制我重新应用CSS背景图片上的映射
- 什么是JSF资源库，如何使用？
- Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
- What is the JSF resource library for and how should it be used?
See also:
这篇关于jsf模板中的背景url路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
