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

I am trying to add a .png file of a logo for my website in the nav bar and have it be a link to the index.html page but can't seem to figure it out. The image wont seem to load. Does anyone have any suggestions, is there anything wrong with my code? I am wondering if the file path is correct too. I know that in my computer it states that the path is Macintosh HD - Users - slaws - Desktop - Fitness Website - FITERACY.png am I even typing it correctly? I am very new to HTML and CSS and would appreciate any advise or tips. Thanks in advance.

<body>
  <nav>
    <ul>
      <li><a href="#"><img src="/desktop/FitnessWebsite/FITERACY.png"></a></li>
      <div >
        <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 ></i></a></li>
        <li ><a href="#">Login</a></li>
        <li ><a href="#">Signup</a></li>
      </div>
    </ul>
  </nav>

CodePudding user response：

It seems you are trying to use "absolute path" of the image, which is probably not necessary in this case... You can try to use "relative path" instead, which is related to the location of your html file.

For example, if the image is located in the very same folder like your html file, just use src="FITERACY.png".

Sometimes it is also good idea to create separate folder for all the website images. The structure of files can be following. In that case you would use something like src="images/image1.jpg"

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