如何在 HTML 中 URL 的 src 路径中上一级？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4810927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to go up a level in the src path of a URL in HTML?
提问by aateeque
I am storing style sheets in {root}/styles while images in {root}/images for a website. How do I give the path in the style sheets to go look in the images directory for the specified images?
我在 {root}/styles 中存储样式表，而在 {root}/images 中存储网站的图像。如何在样式表中指定路径以查看指定图像的图像目录？
e.g. In background-image: url('/images/bg.png');
例如在 background-image: url('/images/bg.png');
回答by lonesomeday
Use ..to indicate the parent directory:
使用..指示父目录：
background-image: url('../images/bg.png');
回答by S.Akruwala
Here is all you need to know about relative file paths:
以下是您需要了解的有关相对文件路径的所有信息：
Starting with
/returns to the root directory and starts thereStarting with
../moves one directory backward and starts thereStarting with
../../moves two directories backward and starts there (and so on...)To move forward, just start with the first sub directory and keep moving forward.
从
/返回到根目录并从那里开始从开始
../向后移动一个目录并从那里开始从开始
../../向后移动两个目录并从那里开始（依此类推......）要前进，只需从第一个子目录开始并继续前进。
Click herefor more details!
点击这里了解更多详情！
回答by ThiefMaster
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)
您可以根据需要经常使用它，例如../../images/，甚至在不同的位置，例如../images/../images/../images/（../images/当然相同）
回答by jaboja
In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png) and relative paths to some upper level directory (e.g. ../images/sth.png) work.
在 Chrome 中，当您从某个 HTTP 服务器加载网站时，绝对路径（例如/images/sth.png）和某些上层目录（例如../images/sth.png）的相对路径都可以工作。
But!
但！
When you load (in Chrome!) a HTML document from local filesystem you cannot access directories above current directory. I.e. you cannot access ../something/something.sthand changing relative path to absolute or anything else won't help.
当您（在 Chrome 中！）从本地文件系统加载 HTML 文档时，您无法访问当前目录之上的目录。即你不能访问../something/something.sth和改变相对路径到绝对或其他任何东西都无济于事。
回答by A.Tressos
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.
image1例如，在 CSS 中，您可以使用 行访问../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 chromeand it worked.
注意：如果您使用的是 Chrome，它可能无法工作，并且您会收到无法找到该文件的错误消息。我遇到了同样的问题，所以我只是从 chrome 中删除了整个缓存历史记录并且它起作用了。
回答by Leendert
If you store stylesheets/images in a folder so that multiple websites can use them, or you want to re-use the same files on another site on the same server, I have found that my browser/Apache does not allow me to go to any parent folder above the website root URL. This seems obvious for security reasons - one should not be able to browse around on the server any place other than the specified web folders.
如果您将样式表/图像存储在一个文件夹中以便多个网站可以使用它们，或者您想在同一服务器上的另一个站点上重复使用相同的文件，我发现我的浏览器/Apache 不允许我转到网站根 URL 上方的任何父文件夹。出于安全原因，这似乎很明显 - 除了指定的 Web 文件夹之外，人们不应该能够在服务器上浏览任何地方。
Eg. does not work: www.mywebsite.com/../images
例如。不起作用：www.mywebsite.com/../images
As a workaround, I use Symlinks:
作为一种解决方法，我使用符号链接：
Go to the directory of www.mywebsite.com Run the command ln -s ../images images
进入 www.mywebsite.com 目录 运行命令 ln -s ../images images
Now www.mywebsite.com/images will point to www.mywebsite.com/../images
现在 www.mywebsite.com/images 将指向 www.mywebsite.com/../images
