我目前在 VS Code 上鏈接事物時遇到問題。我為一個專案創建了一個檔案夾，并將所有檔案真正組織在里面，正確鏈接了所有內容，但仍然一無所獲。 包含所有檔案的檔案夾
代碼是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
<script src="/assets/scripts/card-hover-animation.js"></script>
<title>Spider-Man | Multiverse</title>
</head>
<body>
<nav class="s-menu">
<ul>
<li class="s-menu__item">
<a href="/">Homepage</a>
</li>
<li class="s-menu__item">
<a href="#">Tobey Maguire</a>
</li>
<li class="s-menu__item s-menu__icon">
<img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
<li class="s-menu__item">
<a href="#">Tom Holland</a>
</li>
<li class="s-menu__item">
<a href="#">Andrew Garfield</a>
</li>
</ul>
</nav>CSS 很大，但預覽是這個，你可以通過面包屑看到它在正確的檔案夾中。我仍然得到這個頁面而不是這樣的東西。.
我也嘗試過非常簡單的代碼，比如這個 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/test/style.css">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>使用這個 CSS：
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}如果我將它鏈接為 style.css 檔案，我不會得到stylization。問題不在于 CSS，因為如果我這樣說：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
</style>
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>它完美地作業。如果我鏈接這樣的外部鏈接：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
<img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>它也有效。（外部鏈接，內部還是什么都沒有）。
我到處尋找這個問題，但沒有找到解決方案，并嘗試了一些答案，比如這個，這個，并在方向之前添加點（比如 ./folder/file.css 而不是 /folder/file.css）我什至重新安裝了 VS Code，但它沒有用:(
請幫忙！
uj5u.com熱心網友回復：
根據您的目錄結構，在您的鏈接和影像參考中，您不需要提供更“完整”的路徑，您可以使用相對路徑正確參考它，使用點進入目錄中較低的下一個檔案夾和一個斜線./，像這樣：
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
如果您必須使用更“絕對”的路徑，那么您必須使用 2 個虛線省略號和斜線從當前目錄向上跳出../多次，具體取決于檔案夾的深度，如下所示：
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
但第一種方法更容易理解。
同樣，鏈接和腳本檔案應該這樣參考：
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
與影像標簽一樣，如果您希望使用更完整的路徑，則應以這種方式參考鏈接和腳本檔案：
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>
uj5u.com熱心網友回復：
正如這個答案所說，您必須在選擇任何影像之前使用 ../ ，并且在 vs 代碼上，您不需要撰寫整個檔案名，只需使用 ../ ，它將向您顯示該特定檔案夾中的所有檔案夾和檔案。你只需要選擇它。
或者這個問題的簡單解決方案是，只需將影像復制到與主 html 檔案相同的檔案夾中，只需撰寫影像名稱 vs 代碼即可識別它，只需從那里選擇它。
<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
uj5u.com熱心網友回復：
根據您共享的螢屏截圖，我假設您的 index.html 與您的影像檔案夾位于同一目錄中。然后這將在本地作業。
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/475113.html