HTML 不会在我刚刚从 zip 文件中下载的 Web 服务器上加载图像

如何解决HTML 不会在我刚刚从 zip 文件中下载的 Web 服务器上加载图像

web page with my uploaded image here

我试图找到我的计算机正在使用的路径。我尝试了基本代码 我在我目前所在的程序中学到了东西，但它似乎不起作用。路径是 desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png

程序直接下载我电脑上图片的zip文件并创建一个文件夹。与包含图像的文件关联的根目录。然后使用此代码。

解决方法

怎么了

问题是，在 src 中，您放置了一个相对路径。在 HTML 中，相对路径是开头没有斜线 (/) 的路径。因此，HTML 期望 101-skillcrush-project-code 文件夹中有一个名为 desktop 的文件夹，该文件夹包含所有其他文件夹和图像。

你应该做什么

您不需要为图像放置完整（绝对）路径。您可以放置​​相对路径。也就是说，相对于 index.html 所在的位置。

解决方案

因此，在图像的 src 中，您可以放置​​ 101-skillcrush-project-images/image-icons/HTML Icon.png。

更多信息

HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks

,

如果您make a clear structure for all of your html assets，那肯定会容易得多。这也使处理您的路径变得更加容易。因此，例如从 root 文件夹开始 - 让我们将其命名为 html，您可以将所有 html 页面放入其中。 在 html 内部创建一个子文件夹，例如用于您的图像和 css。文件夹结构如下所示：

 /html    image path from html folder: <img src="img/html-icon.png">
   |- img    save "html-icon.png" here
   |- css 
   |- js
   |- fonts
   |- etc

从另一个文件夹访问图像，例如css 文件夹，you first have to go one level up 和 ..，然后进入 img 文件夹。例如<img src="../img/html-icon.png">

如果您的图像位于“网络文件夹”之外的某个位置，则路径可能会很麻烦。因此，只需组织您的资产 - 您可以更有效、更轻松地找到和使用它。