Path problem of src reference file in Web

When writing Web applications, it is unavoidable to refer to external files in a file, such as stylesheets CSS files and some script JS files, which is undoubtedly to improve the code reuse rate. However, when referencing a file, be sure to refer to the correct file path, or you will not be accessing the relevant file.

To summarize, there are several ways to refer to the relevant files:

Premise:

Related directory structure:

Method One: Use relative paths to the current file (source file)

[HTML]View Plaincopy print?

1. <link  type= "text/css"  rel= "stylesheet"  href= ". /styles/main.css " />    
2. <script  type= "Text/javascript"  src= ></script >    

<link type= "Text/css" rel= "stylesheet" href= ". /styles/main.css "/>  <script type=" Text/javascript "src=". /scripts/dtree.js "></script>  

This makes it possible to refer to Dtree.js and main.css when the page accesses test.jsp using http://localhost:8080/MyProject/test.jsp .

Method Two: Use relative paths to Web engineering

[HTML]View Plaincopy print?

1. <link  type= "text/css"  rel= "stylesheet"  href= styles/ Main.css " />    
2. <script  type= "Text/javascript"  src= "scripts/dtree.js" ></ script>    

<link type= "Text/css" rel= "stylesheet" href= "styles/main.css"/> <script type = "Text/javascript" src= "Scripts/dtree.js" ></script> 

< Span style= "color: #333333; Font-family:helvetica, Tahoma, Arial, Sans-serif "> But as the previous two methods have their bottlenecks, the relative use of method one in relation to the relative path of the JSP page, If we are setting the action to jump to the test.jsp page, that This way of using relative paths is not referenced. For example, when we visit http://localhost:8080/myproject/main.do, the page jumps to the test.jsp page, if the using Method 1, you can't quote. If you use Method 2 to refer to this way, if you access the http://localhost:8080/myproject/test.jsp, is are not quoted.

So is there a way of both worlds, the answer is yes, that's our method three: using the absolute path of the Web project

[HTML]View Plaincopy print?

1. <link  type= "text/css"  rel= "stylesheet"  href= "/ Myproject/styles/main.css " />    
2. <script type= "Text/javascript"  src= "/myproject/scripts/dtree.js" ></ script>    

<link type= "Text/css" rel= "stylesheet" href= "/myproject/styles/main.css"/> <script type= "Text/javascript" src= "/myproject/scripts/dtree.js" ></script> 

So, either through http:// Localhost:8080/myproject/main.do Jump Access test.jsp or direct access http://localhost:8080/ Myproject/test.jsp, can be successfully referenced. Note: If we are deploying a Web app, the context is not set Root (typically configured as project name), i.e. IP and end http://localhost:8080/main.do and http://localhost:8080/test.jsp, this situation when referencing, you can't bring the project name, it should:

[HTML]View Plaincopy print?

1. <link  type= "text/css"  rel= "stylesheet"  href=/styles/ Main.css " />    
2. <script  type= "Text/javascript"  src= "/scripts/dtree.js" ></ script>    

<link type= "Text/css" rel= "stylesheet" href= "/styles/main.css"/>  <script type= "Text/javascript" src= "/ Scripts/dtree.js "></script>  

Path problem of src reference file in Web