HTML - 从子文件夹中选择根文件夹的图像

Question

我们可以说以下是我网站的 DIR 结构

现在在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

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

当您将文件上传到服务器时要小心，有些大部分图片将不会出现在网页上，并且会出现一个崩溃的图标，这意味着当您拥有以下文件结构时，文件路径未正确排列或编码代码应该像这样的文件结构： - ＆gt; web（主文件夹） - ＆gt;图像（子文件夹） - ＆gt; logo.png（子文件夹中的图像）上面的代码如下所示

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

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

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

谢谢 - ＆gt; vamshi krishnan