While working on a website template for a friend, I encountered an issue when uploading the site. The logo image was displaying perfectly fine on my local drive, but once uploaded, it showed as a broken image icon on the live website.
Here is the code snippet:
<header id="jHeader" class="invert">
<!-- NavBar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/IE_logo.png" alt="logo">
</a>
</div>
<!-- Links -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right invert">
<li class="active"><a href="index.html">home</a></li>
<li><a href="about-minimal.html">About Us</a></li>
<li><a href="The Intrepid Earth Process.html">The Intrepid Earth Process</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<!-- Links -->
</nav>
<!-- NavBar -->
</header>
The image exists in the directory but is not showing up.
This is the image link: