Jak dodać obraz do marki navbar w ASP.NET MVC 5 RAZOR

Question

Próbuję asp.net mvc te dni, ale zatrzymany w fazie początkowej. Chcę umieścić obraz zamiast nazwy aplikacji z tytułem i znacznikiem alt. proszę pomóż mi.

Dziękuję

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

jak zrobić powyżej w ten sposób:

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

jestem zdezorientowany jak pokazać obraz w miejscu nazwy Application

Answer 1

Można to zrobić:

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

Następnie w css, mam to:

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

Answer 2

1 opcja: Można zrobić wszystko, co w css:

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

JsFiddle example - w tym przykładzie obrazu jest 350x150 px. Używając właściwości background-size, możesz dostosować rozmiar obrazu.

2 opcji:

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

3 opcji: Define your own helper.

Answer 3

To proste. W MVC-5 działa to.

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

Upewnij się, że logo jest umieszczone we właściwym folderze.

Answer 4

Robin poprosił o pomoc w zastąpieniu tekstu "Chcę umieścić obraz zamiast nazwy aplikacji z tytułem i znacznikiem alt." z obrazem.

Answer 5

Otwórz swój folder aplikacji MVC, utwórz folder o nazwie "Obrazy" obok wszystkich innych folderów (Model, Widok, Kontroler, ...) umieść plik logo.jpg w folderze images. Następnie otwórz View/Home/index.cshtml w edytorze Visual Studio i umieścić następującą linię kodu html wewnątrz górnej <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>