The Problem
A common issue, especially among people migrating to web applications from writing simple static web sites, is the problem where the external resources for a page, to include images, style sheets and script files, do not load.
This problem is frequently caused by using
page-relative URLs to these resources.
Within a static web site, the URL to HTML files is formed from the file path to that page. Within a dynamic web application, this is no longer the case; the URLs are usually formed from mappings within the deployment descriptor (web.xml).
Thus, a URL such as
does
not reference any particular folder on the file system. Rather, it is referencing a
servlet mapped within the deployment descriptor.
When you forward to a
JSP from this servlet, the URL remains the same and the browser has no way of knowing that the URL does not reference a folder. And it certainly has no way of knowing in which folder the JSP resides.
Thus, if you use page-relative URLs in the JSP, the browser tries to use the servlet mapping to resolve the path to the file, and of course, that fails.
The Solution
The solution is to use
server-relative URLs to all external resources in your JSPs. This includes images, style sheets and script files, as well as form actions.
Server-relative URLs begin with the
context path to the web application. Let's say that you have your web application mapped to context path
/xyz. If the images are located in a folder named
images at the root of the web app (the same folder in which WEB-INF resides), the proper URL to reference an image file named
whatever.jpg would be:
This allows us to directly reference the image, and is completely independent of whatever URL the browser thinks is currently loaded. Morever, this URL can be used on
any page in the web application and it will correctly address the resource.
But...
But we
never want to hard-code the context path into our URLs. Bad idea!
Very bad idea!
We want to dynamically grab the context path so that it doesn't matter to the pages what the context path happens to be. To do so in JSP 2.0, we can use an EL expression as follows:
If you are still stuck in the dark ages using JSP 1.x, the following scriptlet expression will do the trick:
An example using this in an image tag:
or in a script tag:
or in a form tag:
Using server-relative addressing ensures that our external resources can always be successfully referenced from any page in the web application.
See
TypesOfPaths for more information on the different types of paths that can be used in a
Java web application.
ServletsFaq JspFaq