web-dev-qa-db-fra.com

Comment ajouter une image à la marque navbar dans ASP.NET MVC 5 RAZOR

j'essaie asp.net MVC ces jours-ci, mais bloqué dans la phase de démarrage. Je veux placer l'image à la place du nom de l'application avec le titre et la balise alt. Aidez-moi, s'il vous plaît.

Je vous remercie

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

comment faire ci-dessus de cette façon:

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

je suis confus comment montrer l'image à la place du nom de l'application

csshtml5twitter-bootstraprazorasp.net-mvc-5
9
Robin

1 option: Vous pouvez tout faire en css:

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

Exemple avec JsFiddle- dans cet exemple, l'image est 350x150 px. Et en utilisant la propriété background-size, vous pouvez ajuster la taille de l'image.

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: Définissez votre propre assistant .

12
Nicolai

C'est simple. Dans MVC-5, cela fonctionne.

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

Et assurez-vous que votre logo est placé dans le bon dossier.

7
digitalman

Tu peux le faire:

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

Alors dans le css, a ceci:

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

Robin a demandé de l'aide pour remplacer le texte "Je veux placer l'image à la place du nom de l'application avec le titre et la balise alt." avec une image.

0
PiggyMacPigPig

Ouvrez votre dossier d'application MVC, créez un dossier appelé "images" à côté de tous les autres dossiers (Modèle, Vue, Contrôleur, ...) et placez votre logo.jpg dans le dossier images. Ensuite, ouvrez View/Home/index.cshtml dans votre éditeur Visual Studio et placez la ligne de code HTML suivante dans le <div> supérieur: 

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