0

I am trying to get a logo image to appear in my bootstrap3 Navbar in Visual Studio but it won't appear. For some reason though if I use a image that contains a web url it works fine no matter the height and width of the image. Can anyone tell me what I am doing wrong?

Code I'm using that won't work:

     <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                      </button>

                      <a class="navbar-brand" href="#">
                          <img id="logo" src="Images/logo.png" /></a>
                    </div>

The image appears however in my split view on Visual studio but when I run the page in Chrome or IE I get the broken image symbol.

Code that does work with an image url:

    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                      </button>

                      <a class="navbar-brand" href="#">
                          <img id="logo" src="http://www.kyste.org/userfiles/2/kyste2013/S&SC_logo.png" /></a>
                    </div>

The folder path is correct as well as I am using images in a carousel that appear fine for example in the below.

    <asp:Image ID="imgPaintball" runat="server" ImageUrl="~/Images/paintball.jpg" alt="Paintball"/>

I am completely lost to what I'm doing wrong!

N.L
  • 5
  • 2

2 Answers2

0

In that case; try adding a slash to your img path.

<img id="logo" src="/Images/logo.png" >

For the record, by the by, you do not need to close your img tags with a /. They are just there to make it easier to read. They do nothing!

David
  • 801
  • 8
  • 19
0

Adding the forward slash worked this time only because the relative link happened to be correct. Try adding an image in a page or control in a different directory and it will probably break also. You need to resolve your image links from the root using either ResolveUrl("~/Images/logo.png") or as follows:

<img id="logo" src="~/Images/logo.png" runat="server" />

More information

IrishChieftain
  • 15,108
  • 7
  • 50
  • 91