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

Question

我正在使用html5样板布局，它在同一级别有一个css，img和js目录。我遇到各种问题从.css文件和.js文件访问图像。我被警告说使用../可能会导致问题，但如果没有某种url生成器（就像我的模板文件一样），我怎样才能最好地访问我的.js和.css文件中的图像？

Answer 1

在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");
}

这样做的问题是资源往往存储在整个地方。这使得重用资源变得更加困难。