javascript - 从脚本和 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/找到背景到/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");
}

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