“..”在 html 图像目录路径中不起作用答案

【问题标题】：".." not working in html image directory path“..”在 html 图像目录路径中不起作用
【发布时间】：2021-07-26 07:38:34
【问题描述】：

文件结构：

-css
   - home.css
-html
   - index.html
-images
   - banner.png

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>myWebsite</title>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
    <header>
        <img id="banner" src="../images/banner.png" alt="Banner Image"/> <!-- my image won't load? -->
    </header>

    <main> 

    </main>
        
    <footer>

    </footer>
</body>
</html>

图片无法加载。当我尝试从浏览器的另一个选项卡中打开图像时，我得到Cannot GET /images/banner.png。我认为这与.. 不起作用有关，但我可能是错的。如果我将图像放在与index.html 相同的目录中，它工作得非常好。但我不想这样做，因为我计划这个项目相当大。我也想使用本地图像加载。有谁知道为什么图片无法加载？

【问题讨论】：

标签： html image path

【解决方案1】：

'../' 从我现在所在的位置上移一个目录 1.找到“资产/”文件夹 2.找到“图像”文件夹 3.找到“image.jpg”文件。只有当您的页面位于

的子文件夹中时，该相对链接才有效

“http://localhost/abc/def/geh/”

如果你的页面位置真的是

“本地主机/asdf/asdf/asdf/asdf/index.php”

（这看起来很荒谬）相对而言，要访问资产文件夹，您必须一直到根目录。

'../../../../abc/deh/geh/assets/images/image.jpg;

或者，您可以在 head 标记中使用 base 标记，以使实际 src 属性中的 URL 更友好。

【讨论】：

【解决方案2】：

如果您的图表是正确的..您的images 和css 目录需要直接在html 目录中.. IE

-html
   - index.html
   - images
       - banner.png
   - css
       - home.css

那时..不需要..

<link rel="stylesheet" type="text/css" href="/css/home.css">
<img id="banner" src="/images/banner.png" alt="Banner Image"/>

【讨论】：

这行得通，它可能是我可以使用的一种可能的文件结构。但是你有没有发现为什么我无法使用原始文件结构加载图像？如果没有，那么我会坚持使用这个文件结构。
您的浏览器无法访问比“根”html 目录“更高”的任何内容..这就是它不起作用的原因..这些目录无法访问..它们必须位于“根”html 目录。