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

Question

文件结构：

-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 相同的目录中，它工作得很好。但我不想这样做，因为我计划这个项目相当大。我也想使用本地图像加载。有谁知道为什么图片加载不出来？

Answer 1

如果你的图表是正确的..你的 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"/>

Answer 2

'../' 从我现在所在的位置上一级目录 1.find 'assets/' 文件夹 2.find 'images' 文件夹 3.find 'image.jpg' 文件。仅当您的页面位于

的子文件夹中时，相对 link 才有效

"http:///localhost/abc/def/geh/"

如果你的页面位置真的是

"localhost/asdf/asdf/asdf/asdf/index.php"

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

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

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

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

".." not working in html image directory path

html

image

path