CODEWITHSUNDEEP
asp.net-mvcmodel-view-controllerview
user1352057
user1352057

Reputation: 3182

Navbar image not displaying on MVC view when calling controller and method

Question background:

I'm finishing the development of a site using book strap on an MVC project.

The issue:

As shown, when running the website and not explicitly typing in the home[controller]\Index[method] the Logo in the Navbar displays correctly:

enter image description here

When typing in the controller and method name that returns its associated view it is not displaying the logo in the Navbar.

enter image description here

Code:

The header - which contains the navbar - and the footer are in their own cshtml file names _Layout.cshtml which can be inherited by any other view which is created using the @RenderBody method, as shown:

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <nav class="navbar navbar-default" role="navigation" id="nav">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand"><img src="images/logo.png" alt="yourLogo"></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#myCarousel">Projects</a></li>
                                <li><a href="#Welcome">Welcome</a></li>
                                <li><a href="#features">Workplace, Education, Development</a></li>
                                <li><a href="#About">About Me</a></li>
                                <li><a href="#Location">Location</a></li>
                                <li><a href="#Contact">Contact Me</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 textAlignCenter">
                    <h5>Copyright &copy; 2014</h5>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</html>

Any help determining why the logo will not display would be appreciated.

Upvotes: 0

Views: 1901

Answers (1)

Venkatesh
Venkatesh

Reputation: 1224

Change your image path to be relative as,

<a class="navbar-brand"><img src="@Url.Content("~/images/logo.png")" alt="yourLogo"></a>

Upvotes: 1

Related Questions