从子文件夹中选择根文件夹的图像答案

【问题标题】：Pick images of root folder from sub-folder从子文件夹中选择根文件夹的图像
【发布时间】：2011-04-08 23:26:49
【问题描述】：

假设以下是我网站的目录结构：

现在在index.html 我可以简单地参考如下图片：

<img src="./images/logo.png">

但我想引用来自sub.html 的同一张图片。 src 应该是什么？

【问题讨论】：

标签： html reference directory src subdirectory

【解决方案1】：

您可以使用相对路径引用图像：

<img src="../images/logo.png">
          __ ______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go one level up

或者您可以使用绝对路径：/ 表示这是服务器上的绝对路径，因此如果您的服务器位于https://example.org/，则从任何页面引用/images/logo.png 都会指向https://example.org/images/logo.png

<img src="/images/logo.png">
          |______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go to the root folder

【讨论】：

我要在目录下一层放一个点
不，你不需要它。 . 表示当前目录，.. 表示父目录。
@aularon 那么......是否意味着上面的两个目录等等？
没有。 ../ 是上面一个目录，../../ 是上面两个目录，以此类推……

【解决方案2】：

你的 index.html 可以只做src="images/logo.png"，而从 sub.html 你可以做src="../images/logo.png"

【讨论】：

【解决方案3】：

../images/logo.png 会将您移回一个文件夹。

../../images/logo.png 会将您移回两个文件夹。

/images/logo.png 将带您回到根文件夹，无论您身在何处/。

【讨论】：

只是补充一点。如果您在 IIS 上使用 localhost，/images/logo.png 将不会生成任何图像。它将在 localhost 而不是应用程序的根目录中搜索。看看stackoverflow.com/a/15357705/114169
在这种情况下，根文件夹在哪里？包含图片、sub_folder 和 index.html 的文件夹，还是项目的根文件夹？
@Ashl7 根文件夹是通过域访问的未指定任何子文件夹的文件夹。
应该标记为答案。第三个选项是我需要的。

【解决方案4】：

相对参考是

<img src="../images/logo.png">

如果您知道相对于服务器根目录的位置，对于具有复杂嵌套目录层次结构的应用程序来说，这可能是最简单的方法 - 所有文件夹都相同。

例如，如果您的问题中描述的目录树相对于服务器的根目录，则 index.html 和 sub_folder/sub.html 都将使用：

<img src="/images/logo.png">

如果图像文件夹位于应用程序的根目录中，例如服务器根目录下的foo（例如http://www.example.com/foo），则 index.html (http://www.example.com/foo/index.html) 例如和 sub_folder/sub.html (http://www.example.com/foo/sub_folder/sub.html ) 都使用：

<img src="/foo/images/logo.png">

【讨论】：

【解决方案5】：

../ 将您带到目录树上的一个文件夹。然后，选择适当的文件夹及其内容。

../images/logo.png

【讨论】：

【解决方案6】：

当您将文件上传到服务器时要小心，当您具有以下文件结构时，您的某些图像不会出现在网页上，并且会出现一个崩溃的图标，这意味着您的文件路径没有正确排列或编码代码应该是这样的文件结构： -> 网络（主文件夹） ->images(子文件夹)->logo.png(子文件夹中的图片)上面的代码如下，遵循这个标准

 <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

如果您通过忽略文件结构将文件上传到网络服务器不创建文件夹 web 如果您直接上传文件，那么您的图像将被破坏您无法看到图像，然后更改代码如下

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

谢谢你->vamshi krishnan

【讨论】：

【解决方案7】：

当您将文件上传到服务器时要小心，当您具有以下文件结构时，您的某些图像不会出现在网页上，并且会出现一个崩溃的图标，这意味着您的文件路径没有正确排列或编码代码应该是这样的文件结构：->web（主文件夹）->images（子文件夹）->logo.png（子文件夹中的图像）上面的代码如下遵循这个标准

img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

如果您通过忽略文件结构而不创建文件夹web将文件上传到Web服务器如果您直接上传文件，那么您的图像将被破坏您看不到图像，然后更改代码如下

<img src="images/logo.jpg" alt="image1" width="50px" height="50px">

谢谢你->vamshi krishnan

【讨论】：