Wie setzen Sie ein Bild in einen ActionLink

Question

<ul class="nav navbar-nav navbar-right">  
    <li > 
     <a href="/GTracker/Account/Login" id="loginLink" style="color:lightgreen"> 
      Login 
      <img src="~/Content/Login-icon-door.png" /> 
     </a> 
    </li> 
    <li> 
     @Html.ActionLink("Log in", "Login", "Account", routeValues: null, 
         htmlAttributes: new { id = "loginLink", style = "color:lightgreen" }) 
    </li> 
</ul> 

Beide gehen die richtige Aktion. Kann ich den ActionLink-Helfer auch verwenden, um das Bild einzubinden?

Answer 1

Sie eine Action Helfer verwenden mögen, so dass Sie nicht über einen hart codierten Pfad in Ihrer Sicht (verständlich) haben.

Wie dies etwa:

<a href="@Url.Action("Login", "Account")" id="loginLink" style="color:lightgreen"> 
    Login 
    <img src="~/Content/Login-icon-door.png" /> 
</a> 

Answer 2

Verwenden Url.Action statt Action.Link

<a href="<%= Url.Action("Login", "Account")%>">Login 
      <img src="~/Content/Login-icon-door.png" /></a> 

Answer 3

Verwenden Url.Action Hyperlink und Url.Content definieren Bildinhalt neben dem Link zu definieren.

@Html.ActionLink("Log in", "Login", "Account", routeValues: null, 
         htmlAttributes: new { id = "loginLink", style = "color:lightgreen" }) 

hat

geändert

<a id="loginLink" href="@Url.Action("Login", "Account") style="color:lightgreen">Log in 
<img alt="Log in" src="@Url.Content("~/Content/Login-icon-door.png")"></a> 

Answer 4

denke ich einige Möglichkeiten, wie Sie dies über CSS und Ersetzen erreichen können.

HTML mit CSS ersetzen

Mit diesem können Sie im Text setzen + der [ersetzbar prop] unter dem Text param der Action. Damit muss der Benutzer keine spezifische Breite für den Text hinzufügen. Das Bild width und height kann auch direkt angegeben werden, anstatt es in die CSS-Klasse einzufügen. Wenn das verwendete Bild bereits in der Größe optimiert ist, müssen wir es nicht mehr hinzufügen. Position: absolute wird hinzugefügt, damit der Text und das Bild richtig ausgerichtet werden.

@Html.Raw(@Html.ActionLink("Login [img]", "Index", "Home").ToHtmlString().Replace("[img]", "<img src='../Content/images/LogIn.png' class='imgLink' />")) 

    .imgLink { 
     position: absolute; 
     width: 20px; 
     height: 20px; 
    } 

CSS

Dazu wird das Bild als Hintergrund hinzugefügt, so dass die Textbreite angegeben werden benötigt. Die Position des Bildes wird als center right festgelegt.

Probe generierten Link mit Bild basierend auf dem folgenden Code:

@Html.ActionLink("Login" , "Index" , "Home" , new { @class="imgLinkButton" }) 

.imgLinkButton{ 
    background: url('img.png') no-repeat center right; 
    display:block; 
    background-size: 20px 20px; 
    height:20px; 
    width:50px; 
} 

Answer 5

Sie müssen stattdessen Url.Action verwenden. Hier ist der sauberste Weg, können Sie es tun:

<li><a href="@Url.Action("Index", "Home")"><img src="~/Assets/Img/myImg.png"/> </a></li>