如何将图像放入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>

两者都采取了正确的行动。但是我可以使用ActionLink帮助程序来包含图像吗？

Answer 1

是否要使用ActionLink帮助程序，以便在视图中没有硬编码路径（可理解）。

这个怎么样：

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

Answer 2

使用Url.Action代替Action.Link

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

Answer 3

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

Answer 4

我认为你可以通过CSS和Replace来实现这一目标。

HTML替换为CSS

有了这个，你可以在ActionLink的文本参数下输入文本+ [replaceable prop]。这样，用户不必为文本添加特定宽度。

也可以直接指定图像width和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。

根据以下代码生成与图像生成的链接：

{{3}}

@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

您需要使用Url.Action。 这是最干净的方法：

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