为什么本地图像/链接在 VS Code 上的 HTML 上不起作用？
[英]Why local images/links don't work on HTML on VS Code?
问题描述
我目前在 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 很大，但预览是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; }
如果我将其链接为 style.css 文件，则不会得到任何样式化。 问题不在于 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，但它没有用:(
请帮忙！
3 个解决方案
解决方案1
1 已采纳 2022-05-12 19:51:11
根据您的目录结构，在您的链接和图像引用中，您不需要提供更“完整”的路径，您可以使用相对路径正确引用它，使用点和进入目录下的下一个文件夹一个斜杠./ ，像这样：
<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>
解决方案2
0 2022-05-12 19:49:15
正如此答案所述，您必须在选择任何图像之前使用 ../，在 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>
解决方案3
0 2022-05-12 20:16:02
根据您共享的屏幕截图，我假设您的 index.html 与图像文件夹位于同一目录中。 然后这将在本地工作。
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">
为什么这3个链接不起作用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.