Question

我使用maven，jsf和richfaces开发了一个动态Web项目。我省略了历史，直接解决了我的问题。经过不长时间的开发，我在Eclipse-＆gt; Tomcat中说明了我的项目。在我的起始页面上有图像和简单的登录表单。图片和设计没问题，因地址http://localhost:8080/myapp/（图片链接和css就像 - myapp/img/header.png）

记录后，我重定向到着陆页（丰富的动态页面）http://localhost:8080/myapp/faces/statistics.xhtml，所有指向图片和css的链接转换为myapp / faces / {{1}之后没有图像和CSS。

我很困惑，发生了什么事？几天前它完美无缺。

在web.xml中我有这个

img/header.png

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

更新

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

<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>

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

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

Answer 1

您不应在网络应用中使用与URI相关的网址。

<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?

Answer 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>

我的问题已经消失了！

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

2 个答案:

另见：