当前位置：文江博客话题详情

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

发布于 2024-10-14 11:09:08 字数 152 浏览 4 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

躲猫猫 2024-10-21 11:09:08

使用 .. 表示父目录：

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

Use .. to indicate the parent directory:

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

回复收藏 0 原文

云仙小弟 2024-10-21 11:09:08

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

从 / 开始返回到根目录并从那里开始
开始于 ../ 移动一个向后移动一个目录并从那里开始
开始于 ../../ 向后移动两个目录并从那里开始（依此类推...）
要向前移动，只需从第一个子目录开始并继续向前移动。

点击此处了解更多详情！

回复收藏 0 原文

鱼窥荷 2024-10-21 11:09:08

使用../：

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

您可以根据需要多次使用它，例如../../images/，甚至可以在不同的位置使用，例如.. /images/../images/../images/ （当然与 ../images/ 相同）

Use ../:

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

You can use that as often as you want, e.g. ../../images/ or even at different positions, e.g. ../images/../images/../images/ (same as ../images/ of course)

回复收藏 0 原文

白昼 2024-10-21 11:09:08

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

但是！

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

回复收藏 0 原文

肥爪爪 2024-10-21 11:09:08

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

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

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

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

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

回复收藏 0 原文

一紙繁鸢 2024-10-21 11:09:08

假设您有以下文件结构：

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

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

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

Supposing you have the following file structure:

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

In CSS you can access image1, for example, using the line ../images/image1.png.

NOTE: If you are using Chrome, it may doesn't work and you will get an error that the file could not be found. I had the same problem, so I just deleted the entire cache history from chrome and it worked.

回复收藏 0 原文