如何在HTML中通过URL向上一级访问src路径？

Question

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

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

- aateeque

Answer 1

使用..表示父级目录：

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

- lonesomeday

---

我也在别处读到过这个，但它不起作用！（至少在Chrome中） - aateeque

可以。但请注意，此处所指的位置是相对于 CSS 文件的位置而言，而非嵌入 CSS 文件的文档位置。 - ThiefMaster

@ThiefMaster 如果我们只使用内联CSS，那应该没问题。 - 1000Gbps

Answer 2

以下是相对文件路径的一切:

• 以/开头返回根目录并从那里开始

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

• 以../../开头向后移动两个目录并从那里开始（以此类推...）

• 要向前移动，只需从第一个子目录开始并继续向前移动。

点击这里获取更多详细信息！

- S.Akruwala

Answer 3

使用 ../：

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

你可以随意使用它，例如../../images/，甚至可以在不同的位置使用，例如../images/../images/../images/（当然与../images/相同）

- ThiefMaster

Answer 4

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

但是！

当你从本地文件系统加载HTML文档时（在Chrome中！），你无法访问当前目录上面的目录。也就是说，你不能访问../something/something.sth，改变相对路径为绝对路径或任何其他方法都无法解决问题。

- jaboja

---

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

它在Linux和Windows上可以运行，但在Mac上无法运行（我的经验）。 - gabn88

链接在这里不计算，因为它们没有同源检查。此外，这个答案已经有6年了，所以浏览器可能已经发生了很大的变化。 - jaboja

Answer 5

如果您将样式表/图片存储在一个文件夹中，以便多个网站可以使用它们，或者您想在同一服务器上的另一个站点上重复使用相同的文件，我发现我的浏览器/Apache不允许我转到网站根目录URL之上的任何父级文件夹。出于安全原因，这似乎很明显-除了指定的Web文件夹之外，不能在服务器上浏览其他任何位置。例如，www.mywebsite.com/../images是无法正常工作的。

解决方法是使用符号链接: 1.进入www.mywebsite.com目录 2.运行命令ln -s ../images images 现在，www.mywebsite.com/images将指向www.mywebsite.com/../images。

- Leendert

---

什么是符号链接？ - webzy

符号链接（也称为软链接）是Linux中的一种文件类型，它指向计算机上的另一个文件或文件夹。符号链接类似于Windows中的快捷方式。有些人将符号链接称为“软链接”——Linux / UNIX系统中的一种链接类型——而不是“硬链接”。 - Leendert

Answer 6

假设你有以下的文件结构：

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

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

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

- A.Tressos

Answer 7

如果你想进入文件夹的根目录，请使用 / 或 ctrl+space 如果你想返回上一级文件夹，请使用 ../ 和 ctrl+space，如果它没有提示，则不要使用 live server 如果你使用 ../

- omar Ahmed