How to add image to navigation mark in ASP.NET MVC 5 RAZOR

Question

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

thanks

<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 the above in this way:

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

I am confused how to show image instead of application name

Answer 1

Option 1: 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, the image is 350x150 px. And using the background-size property, you can adjust the image size.

2:

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

3: Identify your assistant .

Answer 2

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 it:

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

Then in css we get the following:

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

Answer 4

Robin asked for help replacing the text "I want to place the image instead of the application name with a title and tag alt." with an image.

Answer 5

Open the MVC application folder, create a folder called “images” next to all other folders (Model, View, Controller, ...), place your logo in the images folder. Then open View / Home / index.cshtml in the Visual Studio editor and place the following line of html code at the top of the <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>