Analysis on the Problem of introducing external resource relative paths in jsp and css, jspcss

Analysis on the Problem of introducing external resource relative paths in jsp and css, jspcss

Add a base on the jsp page. Available relative paths:

Copy codeThe Code is as follows:
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + "://"
+ Request. getServerName () + ":" + request. getServerPort ()
+ Path + "/";
%>

Then add the base in the

<Base href = "<% = basePath %>"> </base>

When an external file is directly introduced on this page

Copy codeThe Code is as follows:
<Script src = "js/common/jquery-1.11.1.min.js" language = "javascript"
Type = "text/javascript"> </script>
<Script src = "js/common/frame. js" language = "javascript"
Type = "text/javascript"> </script>
<Link href = "css/common/frame.css"
Rel = "stylesheet" type = "text/css"/>
<Link rel = "shortcut icon" href = "images/favicon. ico" type = "image/x-icon"/>

Similarly, the css class on this page

Copy codeThe Code is as follows:
. Top {
Position: absolute;
Left: 0;
Top: 95px;
Right: 0;
Height: 120px;
Background: url (images/common/title.jpg) repeat-x
}

=============================== Exceptions: when external css and js files are introduced, and image files are introduced, ======================== =====

If the relative path is used at this time, because it is no longer in the jsp page, the relative path is relative to the directory where the css file is located:

For example, the css file introduced on the index. jsp page in the new system of zookeeper

<Link href = "css/common/frame.css" rel = "stylesheet" type = "text/css"/> On the jsp page, js/common/frame is introduced. js is searched from the website and directory. No problem.

However, the following css is available in frame. js:

Copy codeThe Code is as follows:
. Show_menu {
Background-image: url (images/left_bg.gif );
Background-repeat: repeat-y;
Background-position: 285px 51px;
}

In this case, the direct url (images/left_bg.gif) is the default path from the directory where the css file is located (/css/common/frame.css) + url (images/left_bg.gif ), therefore, you need to configure the image separately,

Change

Copy codeThe Code is as follows:
. Show_menu {
Background-image: url (.../../images/left_bg.gif );
Background-repeat: repeat-y;
Background-position: 285px 51px;
}