Java Faces 和资源路径映射到图像。我误解了答案

【问题标题】：Java Faces and resource path mapping to images. I misunderstandJava Faces 和资源路径映射到图像。我误解了
【发布时间】：2013-06-12 05:35:00
【问题描述】：

我使用 maven、jsf 和 Richfaces 开发了一个动态 Web 项目。我省略了历史，直奔我的问题。在与开发中断不久之后，我在 Eclipse->Tomcat 中陈述了我的项目。在我的起始页面上有图像和简单的登录表单。图片和设计还可以，地址http://localhost:8080/myapp/（图片和css的链接就像-myapp/img/header.png）

登录后，我重定向到登录页面（即 Richfaces 动态页面）http://localhost:8080/myapp/faces/statistics.xhtml，所有指向图片和 CSS 的链接都转换为 myapp/faces/img/header.png，之后没有图片和CSS。

我很困惑，这是怎么回事？几天前它工作得很好。

在 web.xml 我有这个

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>

我什至不知道从哪里开始解决我的问题。如何将图像返回设计？

更新

我发现这种不愉快的行为只存在于我的 layout.xhtml 中。因为只有我没有创建的这个文件。这是我们对所有项目的设计，简而言之，它看起来像这样：

…
<h:head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<img src="img/header.png">
… design …
<div class="menuAndContent">
    <div class="menuLeft">
        <ui:insert name="menuLeft" />
    </div>
    <div class="content">
        <ui:insert name="content" />
    </div>
</div>
… design …
<img src="img/selector2.gif">
…

所以我只为 div=content 和 div=menu 创建文件。这个文件很好用，上面的所有图像都存在。

只是这个布局文件在跟我“开玩笑”。所有链接：css/main.cssimg/header.pngimg/selector2.gif 他们在第一步工作！在地址 http://localhost:8080/myapp/ 和 browser.dev.tool 向我显示他从路径 myapp/css/main.css myapp/img/header.png 获取这些资源当我更深入http://localhost:8080/myapp/faces/statistics.xhtml 时，登录后，我会重定向到具有不同内容的同一页面。在 browser.dev.tool 我看到带有此链接的页面 css/main.css img/header.png img/selector2.gif - 一切都正确而且很好，但是从 myapp/css/main.css myapp/img/header.png 获取这些资源的路径转换为这个myapp/faces/css/main.cssmyapp/faces/img/header.png。这就是问题所在。

【问题讨论】：

无论你提到什么(myapp/img/header.png)，我想绝对路径你应该提到相对路径("../img.header.png")
在我的所有 .xhtml 文件中，我使用的是相对路径 img/header.png，我的第一个带有登录字段的页面使用通用模板 - layout.xhtml，这是我所有页面的通用布局。这条路径向我展示了浏览器开发工具，首先他从myapp/img/header.png 加载资源，第二步他尝试从myapp/faces/img/header.png 加载资源
问题是您同时使用 .faces 和 /faces/ 作为 url 模式。我建议你只使用一个。

标签： jsf-2 richfaces

【解决方案1】：

您不应该在您的 web 应用程序中使用相对 URI 的 URL。

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<img src="img/header.png">

正如您在浏览器的地址栏中看到的那样，它们相对于请求 URI。如果页面本身位于/faces 文件夹中，那么浏览器也会从该文件夹下下载所有与 URI 相关的资源。

你应该在你的 webapp 中使用上下文相关的 URL。

<link href="#{request.contextPath}/css/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="#{request.contextPath}/favicon.ico" type="image/x-icon" />
<img src="#{request.contextPath}/img/header.png">

不过，最好还是利用JSF资源管理。

<h:outputStylesheet name="css/main.css" />
<link rel="shortcut icon" href="#{resource['favicon.ico']}" type="image/x-icon" />
<h:graphicImage name="img/header.png" />

这些资源在/resources 文件夹中。

WebContent
 |-- WEB-INF
 |-- META-INF
 |-- resources
 |    |-- css 
 |    |    `-- main.css
 |    |-- img
 |    |    `-- header.png
 |    `-- favicon.ico 
 :

另见：

How to reference CSS / JS / image resource in Facelets template?

【讨论】：

【解决方案2】：

非常感谢Alexandre Lavoie（我没有意识到第一眼评论的含义）我的问题确实存在于web.xml文件中

答案就在问题中！

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>

这是双重映射！它应该只有一个映射！所以我只留下这个

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

我的问题已经解决了！

【讨论】：