为什么本地 images/links 在 VS Code 上对 HTML 不起作用？

Question

我目前在使用 VS Code linking 时遇到问题。我为一个项目创建了一个文件夹，并将所有文件真正组织在里面，link 一切正常，但仍然一无所获。 Folder with all the files

密码是这个：

<!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 很大，但预览是 This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this.。

我也试过像这样非常简单的代码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;
}

如果我 link 它作为 style.css 文件，我得到 no 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>

它 works perfectly. 并且如果我 link 像这样的外部 link:

<!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>

它也works.（外部link，内部还是什么都没有）

我到处寻找这个问题但没有找到解决方案并尝试了一些答案，例如 , 并在方向前添加点（例如 ./folder/file.css 而不是 /folder/file.css) 我什至重新安装了 VS Code 但它没有用 :(

请帮忙！

Answer 1

你必须在选择任何图像之前使用 ../ 并且在 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>

Answer 2

根据你的目录结构，在你的link和图片引用中，你不需要提供更“完整”的路径，你可以使用相对路径正确引用它，进入下一步使用点和斜杠 ./ 在目录中较低的文件夹，如下所示：

<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和脚本文件应该这样引用：

<link rel="stylesheet" href="./css/home-page-styles.css"> 
<script src="./scripts/card-hover-animation.js"></script>

与图像标签一样，如果您希望使用更完整的路径，则应这样引用 link 和脚本文件：

<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>

Answer 3

根据您共享的屏幕截图，我假设您的 index.html 与图像文件夹位于同一目录中。然后这将在本地工作。

<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">

为什么本地 images/links 在 VS Code 上对 HTML 不起作用？

Why local images/links don't work on HTML on VS Code?

html

css

visual-studio-code