Resource Url Problems
Applies to:
NA
Description:
A common issue is the problem where the external resources for a page, to include images, style sheets and script files, do not load.
Cause:
his 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
http://some.server.com/command/doSomething
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 is to use server-relative URLs to all external resources in your JSPs. This includes images, style sheets and script files.
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:
/xyz/images/whatever.jpg
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 we never want to hard-code the context path into our URLs cause this is a 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:
${pageContext.request.contextPath}
If you are still stuck in the dark ages using JSP 1.x, the following scriptlet expression will do the trick:
< %= request.getContextPath() %>
An example using this in an image tag:
or in a script tag:
Using server-relative addressing ensures that our external resources can always be successfully referenced from any page in the web application.