这些天我遇到了很多关于css和js路径的问题。经过几次测试后，我无法得到确切的答案，所以我在这里寻求帮助。
1文件和结构。
1）test.css
body{backgorund-image:url(img/bg.gif);}
2）测试/ JS
icon:img/icon.gif
3）example.html的
<html>
<link.... src=css/test.css>
<script ... src=js/test.js>
....
</html>
4）example_sub.html
<html>
<link.... src=../css/test.css>
<script ... src=../js/test.js>
....
</html>
5）药结构：
+img
icon.gif
bg.gif
+css
test.css
+js
test.js
example.html
+subfolder
example_sub.html
2个问题
example.html工作，但是example_sub.html不起作用，错过了icon.gif。
所以我想知道test.js是否会在所有页面中使用的常见js，所以所有这些页面都应该放在同一个目录中？
路径是如何工作的，我的意思是浏览器如何根据图像路径找到图像？
似乎css中的方式与js中的方式不同。
任何人都可以给我一个明确的答案吗？
BTW，我的页面都是jsp，因此它们可以在servlet容器中工作。
如果我使用绝对路径：
xxxx src="/img/icon.gif"
它会尝试找到http // localhot：8000 / img / icon.gif。对于cource，它将得到404错误。
有什么想法吗？
答案 0 :(得分：7)
CSS中的路径与样式表的位置有关。如果它是链接的样式表，那么它就是CSS文件的路径。如果它嵌入在HTML文档中（带有样式元素或属性），则它与HTML文档相关。
JavaScript操纵其他文档。提到的任何路径取决于对文档进行了哪些操作。如果您使用JS添加包含URL的样式属性，那么该URL与HTML文档相关，因为style属性是其中的一部分。
如果我使用像src =“/ img / icon.gif”这样的绝对路径，它会尝试找到http // localhot：8000 / img / icon.gif。对于cource，它将得到404错误。
为什么“当然”？确保路径存在，并且没有问题。根相对URI（即以/开头的）通常是最明智的选择。
答案 1 :(得分：2)
答案 2 :(得分：1)
路径始终相对于引用它的文件所在的路径。所以，假设您的css在/css/mystyel.css中，图片在路径/img中，那么您可以参考该图像在css中：
background-image:url(../img/myimg.jpg)
如果您在/js/myscript.js中输入了js并且您正在使用/somepath/somehtml.html这样的html文件，那么您可以使用：
<script type="text/javascript" src="../js/myscript.js"></script>
如果html位于/somepath/somotherpath/somehtml.html，您就会使用src="../../js/myscript.js"
答案 3 :(得分：0)
好
body{backgorund-image:url(img/bg.gif);}
在这个目录中查找文件夹img和文件bg.gif
您想要返回一个父目录。
body{backgorund-image:url(../img/bg.gif);}