在调用转发到JSP的Servlet时,浏览器无法访问/查找CSS,图像和链接等相关资源

Question

在调用转发到JSP的Servlet时,浏览器无法访问/查找CSS,图像和链接等相关资源

当我将servlet转发到JSP时,我在加载CSS和图像以及创建指向其他页面的链接方面遇到了麻烦.具体而言,当我把我的<welcome-file>给index.jsp的CSS被加载并正在显示我的图片.但是,如果我将我设置<welcome-file>为HomeServlet哪个转发控制index.jsp,则不应用CSS并且不显示我的图像.

我的CSS文件在web/styles/default.css.
我的照片在web/images/.

我像这样链接到我的CSS:

<link href="styles/default.css" rel="stylesheet" type="text/css" />

Run Code Online (Sandbox Code Playgroud)

我正在显示我的图像如下:

<img src="images/image1.png" alt="Image1" />

Run Code Online (Sandbox Code Playgroud)

这个问题是怎么造成的,怎么解决？

更新1:我添加了应用程序的结构,以及其他一些可能有用的信息.

替代文字

该header.jsp文件是包含CSS链接标记的文件.该HomeServlet设置为我welcome-file在web.xml:

<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>

Run Code Online (Sandbox Code Playgroud)

servlet被声明并映射为web.xml:

<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

Run Code Online (Sandbox Code Playgroud)

更新2:我最终发现了问题 - 我的servlet映射不正确.显然当设置一个Servlet时,<welcome-file>它不能有一个URL模式/,我觉得有点奇怪,因为它不代表网站的根目录？

新映射如下:

<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bal*_*usC 98

JSP文件生成的HTML页面中的所有相对URL都与当前请求URL(您在浏览器地址栏中看到的URL)相关,而不是您所期望的服务器端JSP文件的位置.这就是webbrowser必须通过URL单独下载这些资源,而不是必须以某种方式从磁盘中包含它们的Web服务器.

除了更改相对URL以使它们相对于servlet的URL而不是JSP文件的位置之外,解决此问题的另一种方法是使它们相对于域根(即以a开头/).这样,在更改servlet的URL时,无需担心再次更改相对路径.

<head>
    <link rel="stylesheet" href="/context/css/default.css" />
    <script src="/context/js/default.js"></script>
</head>
<body>
    <img src="/context/img/logo.png" />
    <a href="/context/page.jsp">link</a>
    <form action="/context/servlet"><input type="submit" /></form>
</body>

Run Code Online (Sandbox Code Playgroud)

但是,您可能不希望硬编码上下文路径.很合理.您可以在EL中获取上下文路径${pageContext.request.contextPath}.

<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
    <script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath}/img/logo.png" />
    <a href="${pageContext.request.contextPath}/page.jsp">link</a>
    <form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>

Run Code Online (Sandbox Code Playgroud)

(可以很容易地缩短<c:set var="root" value="${pageContext.request.contextPath}" />并在${root}其他地方使用)

或者,如果您不担心不可读的XML和破坏的XML语法突出显示,请使用JSTL <c:url>:

<head>
    <link rel="stylesheet" href="<c:url value="/css/default.css" />" />
    <script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
    <img src="<c:url value="/img/logo.png" />" />
    <a href="<c:url value="/page.jsp" />">link</a>
    <form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>

Run Code Online (Sandbox Code Playgroud)

无论哪种方式,如果你有很多相对的URL,这反过来又很麻烦.为此你可以使用<base>标签.所有相对URL将立即变为相对于它.它不过开始与方案(http://,https://,等).在普通EL中没有简洁的方法来获取基本上下文路径,所以我们需要一些JSTL的帮助.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body>
    <img src="img/logo.png" />
    <a href="page.jsp">link</a>
    <form action="servlet"><input type="submit" /></form>
</body>

Run Code Online (Sandbox Code Playgroud)

这反过来(再次)一些警告.锚点(#identifierURL)也将相对于基本路径!您希望改为相对于请求URL(URI).所以,改变就好