Come aggiungere un'immagine al marchio navbar in ASP.NET MVC 5 RAZOR

Question

sto provando asp.net mvc in questi giorni ma bloccato nella fase iniziale. Voglio posizionare l'immagine al posto del nome dell'applicazione con il titolo e il tag alt. mi aiuti per favore.

Grazie

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

come farlo soprattutto in questo modo:

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

Sono confuso come mostrare un'immagine al posto del nome dell'applicazione

Answer 1

Si può fare questo:

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

Poi nel css, hanno questa:

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

Answer 2

1 opzione: si può fare tutto in css:

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

JsFiddle example - questa immagine esempio è 350x150 px. E usando la proprietà background-size puoi regolare la dimensione dell'immagine.

2 opzione:

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

3 possibilità: Define your own helper.

Answer 3

È semplice. In MVC-5, questo funziona.

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

E assicurarsi che il logo sia inserito nella cartella corretta.

Answer 4

Robin ha richiesto aiuto con la sostituzione del testo "Voglio posizionare l'immagine al posto del nome dell'applicazione con il titolo e il tag alt." con un'immagine.

Answer 5

Aprire la cartella dell'applicazione MVC, creare una cartella denominata "immagini" accanto a tutte le altre cartelle (Modello, Visualizza, Controller, ...) inserire il logo.jpg all'interno della cartella images. Poi aperto Vista/Home/index.cshtml nel vostro editor di Visual Studio e posizionare la seguente riga di codice HTML all'interno della parte superiore <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>