html - 来自计算机的图像未显示在 Github io/pages 上

Question

我使用 Visual Studio Code(目前仅支持 HTML 和 CSS)创建了一个简单的页面，我设法使它在我的浏览器上看起来不错(感谢这里顺便提的一些查询的帮助)。

但是，当我推送到 Giuthub 时，我丢失了我的 Logo (在页面上放置了两次)。我检查了语法、大小写字母等，并且查看了这些线程以寻求答案，但我正在努力寻找解决方法。

它是这样写的(在本例中，在导航栏部分)- 存储在我的 mac 上:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
        <img src="/Users/**********/documents/Norfbeech Creates/tasq_logo_5.png" width="190" height="70" alt="" />
    </a>
</nav> 

我还在页面底部添加了 Logo 图像，但它也不存在。

您认为保存图像的文件夹中的空间是否通过空白区域受到影响？实际图像文件没有空格，但 GitHub 会占用该空间吗？

在元素文件夹(文档 - HTML、CSS、图像)中创建一个图像文件是个好主意吗？我今天将其发送以供审核，图像对于页面的外观非常重要。

我确实简要地阅读了一些关于编码图像的内容，但是当我昨晚下线时已经很晚了。

非常感谢。

Answer 1

问题是您引用了错误的路径。

现在您已经插入了图像的绝对位置，因为它保存在您的硬盘上。当您将代码推送到外部服务器时，这将不起作用。

需要放图片的相对路径:假设您具有以下结构:

 - src
  - img/tasq_logo_5.png
  - index.html

在您的 index.html 中，您希望按如下方式引用图像:

<img src="./img/tasq_logo_5.png" />