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

【问题标题】：HTML won't load the image on my web server that I just downloaded from a zip fileHTML 不会在我刚刚从 zip 文件下载的 Web 服务器上加载图像
【发布时间】：2021-06-02 00:36:19
【问题描述】：

web page with my uploaded image here

我试图找到我的计算机使用的路径。我尝试了基本代码我在我目前参与的一个程序中学习，但它似乎没有用。路径为 desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png

该程序指示在我的计算机上下载图像的 zip 文件并创建一个文件夹。与包含图像的文件关联的根目录。然后使用此代码。

【问题讨论】：

你用什么程序来创建你的文件？
如果您的 html 文件在 Desktop 中，则无需在图片 URL 中指定desktop/。然后图像会破裂。
另外，请使用专用的文本编辑器，例如 VS Code 或 Notepad++，而不是 Chrome DevTools。
控制台说什么？我注意到那里有一个错误。
控制台可能显示“加载资源失败”。可能是因为图片路径无效？

标签： html linux file frontend image-loading

【解决方案1】：

怎么了

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

你应该怎么做

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

解决方案

所以，在图片的src中，可以放101-skillcrush-project-images/image-icons/HTML Icon.png。

【讨论】：

好吧没用。还有其他想法吗？？由于 HTML 文档，它不起作用。我在哪里放置 HTML 文档以使其相对于图像？我只是认为这可能是问题所在。这是出于学习目的，所以我真的很感激。
这与移动 HTML 文件无关。您应该移动 image 使其与 HTML 文件位于同一文件夹中。从那里开始，您只需将图像的名称放在src 中。
谢谢！原来文件放错地方了。

【解决方案2】：

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

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

【讨论】：

非常感谢！理解它的结构真的很有帮助。

怎么了

你应该怎么做

解决方案

更多信息