从子文件夹中选取根文件夹的图像

Question

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

现在在 index.html 中，我可以简单地引用图像，例如：

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

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

Answer 1

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

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

/images/logo.png 无论您在哪里，都会带您返回根文件夹。

Answer 2

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

<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

Answer 3

相对引用是

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

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

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

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

如果 images 文件夹位于 等应用程序的根目录中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">

Answer 4

您的index.html可以执行src="images/logo.png"，而从sub.html您可以执行src="../images/logo.png"

Answer 5

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

../images/logo.png

Answer 6

当您将文件上传到服务器时请小心，有些书籍您的图像不会出现在网页上，并且会出现崩溃的图标，这意味着您的文件路径未正确排列或编码，当您具有以下文件结构时，代码应该像这样
文件结构：
->web（主文件夹）
->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

Answer 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