如何将图像放入 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定义hyperlink和Url.Content定义link之外的图像内容。

@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 和替换来实现。

HTML 替换为 CSS

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

图像width和height也可以直接指定而不是在CSSclass中添加。如果使用的图像已经在尺寸上进行了优化，那么我们就不需要再添加它了。添加 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.

样本生成 link 图像基于以下代码：

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

如何将图像放入 ActionLink

How put a image inside an ActionLink

c#

asp.net-mvc

actionlink