从脚本和 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");
}

这样做的问题是资源往往存储在各处。这使得重用资源变得更加困难。