Javascript 从脚本和css文件访问img目录

我使用的是html5样板布局，它在同一级别上有一个css、img和js目录。我在从.css文件和.js文件访问图像时遇到各种各样的问题。有人警告我，使用

。/

可能会导致问题，但如果没有某种url生成器（就像我在模板文件中使用的那样），我如何才能最好地访问.js和.css文件中的图像？

访问css中静态资源的一种可靠方法是始终提供完整路径：

body {
    background-image: url("/path/to/image.png");
}

注意前面的

/

字符。它告诉浏览器在服务器的根目录下查找文件。例如，如果您当前处于

http://example.com/pictures/album/5

然后上述CSS将在

http://example.com/path/to/image.png

使用完整路径还可以鼓励您保持资源的良好组织

但这并不是说使用相对路径是一件坏事。如果您正在处理CSS项目并将其放入子文件夹中，例如

/static/myproject/project.CSS

，则可以使用相对路径引用该文件夹中的图像

如果我们说您的项目位于

/static/myproject

，文件夹结构如下所示：

/static/myproject/project.css
/static/myproject/back-button.gif
/static/myproject/forward-button.gif

然后，在CSS文件中，可以调用与CSS文件相关的图像：

.back {
    background-image: url("back-button.gif");
}
.forward {
    background-image: url("forward-button.gif");
}

---

这样做的问题是，资源往往被存储在所有地方。这使得资源的重用更加困难。

如果你使用smarty这样的模板引擎，你可以设置一个APP_BASE_URL，并在你的模板引擎中使用它，比如{$APP_BASE_URL}js/和{$APP_BASE_URL}css/和{$APP_BASE_URL}图片/我想知道使用CDN时，比如亚马逊的CloudFront，效果如何？预挂起

/

是否会导致它从CDN的源目录中查看？如果不是，在遍历CDN目录时使用

。/

是否仍然有效？@FloatingRock否，如果您使用的是CDN，则需要提供完整的URI（例如

http://your-cdn.com/path/to/image.gif

）。CDN基本上只是地理分布的硬盘，您可以在其中放置文件，它们不知道您的HTML

href

s/

src

s指向什么。