如何使 .png 徽标文件在导航栏中用作 index.html link？

Question

我正在尝试在导航栏中为我的网站添加徽标的 .png 文件，并将其作为 link 到 index.html 页面，但似乎无法理解出去。图片似乎无法加载。有没有人有任何建议，我的代码有什么问题吗？我想知道文件路径是否也正确。我知道在我的电脑上它指出路径是 Macintosh HD - Users - slaws - Desktop - Fitness Website - FITERACY.png 我输入的是否正确？我是 HTML 和 CSS 的新手，如果有任何建议或提示，我将不胜感激。提前致谢。

<body>
  <nav>
    <ul>
      <li><a href="#"><img src="/desktop/FitnessWebsite/FITERACY.png"></a></li>
      <div class="float-right">
        <li><a href="#">Categories</a></li>
        <li><a href="#"><input type="text" placeholder=" Search Programs"></a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Become an Instructor</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
        <li class="login"><a href="#">Login</a></li>
        <li class="signup"><a href="#">Signup</a></li>
      </div>
    </ul>
  </nav>

Answer 1

您似乎在尝试使用图像的“绝对路径”，在这种情况下可能没有必要...您可以尝试使用“相对路径”代替，这与您的位置有关html 文件。

例如，如果图像与 html 文件位于同一文件夹中，则只需使用 src="FITERACY.png".

有时为所有网站图片创建单独的文件夹也是个好主意。文件的结构可以如下。在那种情况下，你会使用像 src="images/image1.jpg"

这样的东西

index.html
images
-- image1.jpg
-- image2.jpg

如何使 .png 徽标文件在导航栏中用作 index.html link？

How can I make a .png logo file work as a index.html link in a nav bar?

html

css

image

html-lists

nav