Servlets - Browser can't access css, images when doing a forward to a JSP?

Question

I'm having trouble with loading css and images when I have a servlet forward to a JSP. Specifically, when I set my welcome-file to index.jsp, the css is being loaded and my images are being displayed. However, if I set my welcome-file to HomeServlet and forward control to index.jsp, the css is not being applied and my images are not being displayed.

My css file is in web/styles/default.css. My images are in web/images/.

I'm linking to my CSS like so:

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

I'm displaying my images as follows:

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

Anyone know what is going on?

Thanks for any help.

UPDATE:

I've added the structure of the application, as well as some other information that might help.

The header.jsp file is the file that contains the link tag for the CSS:

<link href="${pageContext.request.contextPath}/styles/default.css" rel="stylesheet" type="text/css" />

The HomeServlet is set as my welcome-file (web.xml):

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

The servlet is declared as followed in the web.xml:

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

The servlet is mapped as follows (in web.xml):

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

Thanks again.

UPDATE #2:

I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your welcome-file it can't have a URL pattern of "\". Which I find sort of weird, because wouldn't that stand for the root directory of the site?...

The new mapping is as follows:

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

Answer 1

You must analyse the actual HTML output, for the hint.

By giving the path like this means "from current location", on the other hand if you start with a / that would mean "from the context".

Answer 2

Your welcome page is set as That Servlet . So all css , images path should be given relative to that servlet DIR . which is a bad idea ! why do you need the servlet as a home page ? set .jsp as index page and redirect to any page from there ?

are you trying to populate any fields from db is that why you are using servlet ?

Answer 3

All relative URL's inside the JSP page are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the forwarded JSP page as you seem to expect.

Apart from changing the relative URL's to make them relative to the URL of the servlet instead of the JSP, 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.

<link rel="stylesheet" href="/context/css/default.css">
<script src="/context/js/default.js"></script>
<img src="/context/img/logo.png">

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

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css">
<script src="${pageContext.request.contextPath}/js/default.js"></script>
<img src="${pageContext.request.contextPath}/img/logo.png">

This is in turn pretty cumbersome if you have a lot of relative URL's. 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 uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"  %>
...
<base href="${fn:replace(pageContext.request.requestURL, pageContext.request.requestURI, '')}${pageContext.request.contextPath}/">
<link rel="stylesheet" href="css/default.css">
<script src="js/default.js"></script>
<img src="img/logo.png">

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>

to

<a href="${pageContext.request.requestURI}#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 :)

See also:

• Is it recommended to use the <base> html tag?