How to add image to navbar-brand in ASP.NET MVC 5 RAZOR

Question

i am trying asp.net mvc these days but stuck in beginning phase. I want to place image in place of application name with title and alt tag. please help me.

Thank you

<div class="navbar-header pull-left">
    <a class="navbar-brand" href="index.html"><img src="img/accomodator-mini.png" title="title" alt="additional title" /></a>
</div>

how to do above in this way:

 @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

i am confused how to show image in the place of Application name

Answer 1

1 option: You can do everything in css:

.navbar-brand{
    background: url(http://placehold.it/350x150) no-repeat;
    background-size: 40px 40px;
    height:40px;
    margin:5px;
    width:40px;
}

JsFiddle example - in this example image is 350x150 px. And using background-size property you can adjust the image size.

2 option:

<a href="@Url.Action("Index", "Home")" class="navbar-brand">
    <img src="img/accomodator-mini.png" title="title" alt="additional title" />
</a>

3 option: Define your own helper.

Answer 2

Its simple. In MVC-5, this works.

<a href="@Url.Action("Index", "Home")" class="navbar-brand">
  <img src="~/Images/logo.png" title="title" alt="additional title" />
</a>

And make sure your logo is placed in the correct folder.

Answer 3

You can do this:

@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

Then in the css, have this:

.navbar-brand {
    background-image: url(img/accomodator-mini.png);
}

Answer 4

Open your MVC application folder, create a folder called 'images' next to all other folders (Model, View, Controller,...) put your logo.jpg inside the folder images. Then open View/Home/index.cshtml in your Visual Studio editor and place the following line of html code inside the top <div>:

<div class="jumbotron">
    <img src="images/logo.jpg" alt="Games Logo" ALIGN="right" />
    <h1>Computer Games Library</h1>
    <p class="lead">Programmer: Marzieh Farahani</p>
</div>