如何在 HTML 中的 URL 的 src 路径中上一层楼？

Posted 2023-02-22

【中文标题】如何在 HTML 中的 URL 的 src 路径中上一层楼？

【英文标题】：How to go up a level in the src path of a URL in HTML?

【发布时间】：2011-06-16 04:55:36

【问题描述】：

我将样式表存储在 root/styles 中，而图像存储在网站的 root/images 中。 如何在样式表中提供路径以在图像目录中查找指定图像？

例如在background-image: url('/images/bg.png');

【参考方案1】：

如果您将样式表/图像存储在一个文件夹中以便多个网站可以使用它们，或者您想在同一服务器上的另一个站点上重复使用相同的文件，我发现我的浏览器/Apache 不允许我转到网站根 URL 上方的任何父文件夹。出于安全原因，这似乎很明显 - 除了指定的 Web 文件夹之外，不应在服务器上浏览任何地方。

例如。不起作用：www.mywebsite.com/../images

作为一种解决方法，我使用符号链接：

进入 www.mywebsite.com 的目录 运行命令 ln -s ../images images

现在 www.mywebsite.com/images 将指向 www.mywebsite.com/../images

【讨论】：

什么是符号链接？

“符号链接（也称为符号链接）是 Linux 中的一种文件，它指向您计算机上的另一个文件或文件夹。符号链接类似于 Windows 中的快捷方式。有些人称之为符号链接”软链接”——Linux/UNIX 系统中的一种链接——与“硬链接”相对。”——来自freecodecamp.org/news/…

【参考方案2】：

假设你有以下文件结构：

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

在 CSS 中，您可以访问 image1，例如，使用行 ../images/image1.png。

注意：如果您使用的是 Chrome，它可能无法正常工作，并且您会收到找不到文件的错误消息。我遇到了同样的问题，所以我只是从 chrome 中删除了整个缓存历史记录，它就成功了。

【参考方案3】：

在 Chrome 中，当您从某个 HTTP 服务器加载网站时，绝对路径（例如 /images/sth.png）和某些上层目录的相对路径（例如 ../images/sth.png）都可以工作。

但是！

当您从本地文件系统加载（在 Chrome 中！）html 文档时，您无法访问当前目录之上的目录。 IE。您无法访问 ../something/something.sth 并将相对路径更改为绝对路径或其他任何内容都无济于事。

【讨论】：

重新检查后，我可以报告本地文件系统相对路径使用 ../ 可以正常工作 - 或者至少在这种特定情况下可以正常工作！

它确实适用于 linux 和 windows，而不适用于 mac（我的经验）

链接不计算在内，因为它们没有同源检查。此外，这个答案已有 6 年历史，因此浏览器可能发生了很大变化。

【参考方案4】：

以下是您需要了解的有关相对文件路径的所有信息：

开始于/返回根目录并从那里开始

开始于 ../ 向后移动一个目录并从那里开始

起始于 ../../ 向后移动两个目录并从那里开始（依此类推...）

要前进，只需从第一个子目录开始，继续前进。

点击here了解更多详情！

【参考方案5】：

使用..表示父目录：

background-image: url('../images/bg.png');

【讨论】：

我在其他地方也读到过——但它不起作用！ （至少在 Chrome 中）

确实如此。但是请注意，该位置是相对于 CSS 文件的位置，而不是嵌入 CSS 文件的文档。

@ThiefMaster 如果我们只使用内联 CSS 应该是这样

【参考方案6】：

使用../:

background-image: url('../images/bg.png');

您可以随意使用它，例如../../images/ 甚至在不同的位置，例如../images/../images/../images/（当然和../images/一样）