如何在动作链接中放置图像

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

两者都采取正确的操作。但是我可以使用ActionLink助手还包含图像吗？如何在动作链接中放置图像

来源

2016-06-10 Juan Carlos Oropeza

Url.Action＆Url.Content可以代替你的ActionLink，然后htmlAttributes设置CSS属性给他们以正确的顺序排列。 http://stackoverflow.com/questions/26213704/adding-images-within-html-actionlink –

你想使用ActionLink的帮手，让你不必在您的视图（可以理解）的硬编码路径。

如何：

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

来源

2016-06-10 04:01:29 SBurris

使用Url.Action而不是Action.Link

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

来源

2016-06-10 04:01:33 Sudsy

使用Url.Action来定义超链接，并Url.Content定义除了链接的图像内容。

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

已更改为

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

来源

2016-06-10 04:08:25

我觉得有些你可以做到这一点的方法之一是通过CSS和替换。

HTML使用CSS

有了这个替换，你可以把在ActionLink的文本PARAM下的文字+的[更换道具。借此，用户不必为文本添加特定的宽度。

图像0和height也可以直接指定，而不是将其添加到CSS类中。如果使用的图像尺寸已经优化，那么我们不需要再添加它。添加了Position: absolute，以便文本和图像正确对齐。

@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

为此，图像被添加作为背景，因此需要文本宽度被指定。图像的位置设置为center right。

样品根据下面的代码生成与图像链接：

@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; 
}

来源

2016-06-10 04:18:47 denchu

你的意思是'替换** **或**'CSS'，这是两种不同的解决方案，不是吗？对于'CSS'我是否需要进行计算以使图像出现在''Login''的右侧或者是自动的？ –

我已经把它放在了正确的位置上。是的，你可以通过CSS指定图像的位置 – denchu

我的意思是bg大小是'20x20'我猜这是图像大小？但你的宽度是50px，所以我想这是'LOGIN'文本？所以如果我改变文字，我必须计算尺寸？ –

您需要使用Url.Action代替。这里是你可以做最彻底的方法：

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

来源

2017-03-02 06:56:11 pa0101

如何在动作链接中放置图像

回答

相关问题