Browser Can't Access/Find Relative Resources Like Css, Images and Links When Calling a Servlet Which Forwards to a Jsp

Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.

Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.

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

However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${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>

(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)

Or, if you don't fear unreadable XML and broken XML syntax highlighting, use 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>

Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.

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

This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like

<a href="#identifier">jump</a>

<a href="${uri}#identifier">jump</a>

Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)

JSP page can't access/find relative resources like CSS, images

Map your static resources on a url using mvc static resources.

<mvc:resources mapping="/resources/**" location="/resources/, /WEB-INF/static/" />

For example :

(xml conf)

 <mvc:resources mapping="/css/**" location="/css/" />

(java based conf)

@Configuration
@EnableWebMvc
public class MvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/resources/**")
          .addResourceLocations("(/resources/");    
    }
}

Anyway, placing them inside webapp should be enough.

How to make css apply to jsp when using servlet to show jsp?

All files in the WEB-INF directory are not directly accessible to the end user. My suggestion is

move your css file to a directory outside WEB-INF but at the same level e.g. resources
change the import of the css file in the jsp as <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/style.css/>"

i can't link my css to my jsp in eclipse working on dynamic web project jee

Guys i just reinstalled Eclipse using jdk 8 then i placed my css in a folder named css inside WebContent .
and finally linked my jsp with :

<link rel="stylesheet" href="<c:url value ="/css/loginStyle.css"/>" />

What is role of ending / in url?

From an article I found, it looks like a folder can either be addressed with a "/" at the end or not. It's not a settled situation. The main thing is to be consistent.

Since the form with the slash at the end is being interpreted correctly by the Servlets code, and the other isn't, I have reached the conclusion that the best plan would be to stick with the slash version, and use 301 redirects to handle the non-slash case.

Browser Can't Access/Find Relative Resources Like Css, Images and Links When Calling a Servlet Which Forwards to a Jsp