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

Both go the the right action. But can I use ActionLink helper to also include the image?

enter image description here

Juan Carlos Oropeza
  • 47,252
  • 12
  • 78
  • 118
  • 1
    Url.Action & Url.Content can substitute your ActionLink, then setting CSS property on htmlAttributes to arrange them in proper order. http://stackoverflow.com/questions/26213704/adding-images-within-html-actionlink – Tetsuya Yamamoto Jun 10 '16 at 04:00

5 Answers5

2

Do you want to use an ActionLink helper so that you do not have a hard coded path in your view (understandable).

How about this:

<a href="@Url.Action("Login", "Account")" id="loginLink" style="color:lightgreen">
    Login
    <img src="~/Content/Login-icon-door.png" />
</a>
SBurris
  • 7,378
  • 5
  • 28
  • 36
1

Use Url.Action instead of Action.Link

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

Use Url.Action to define hyperlink and Url.Content to define image content besides the link.

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

has changed to

<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>
Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61
0

I think some ways you can achieve this is via CSS and Replace.

HTML Replace with CSS

With this, you can put in the text + the [replaceable prop] under the text param of the ActionLink. With this, the user does not have to add specific width to for the text.

The image width and height can also be specified directly instead of adding it in the CSS class. If the image used is already optimized in size, then we don't need to add it anymore. Position: absolute is added so the text and image will be aligned properly.

    @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

For this, the image is added as the background, so the text width is needed to be specified. The position of the image is set as center right.

Sample generated link with image based on the code below:

Sample

@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;
}
denchu
  • 839
  • 7
  • 10
  • You mean `Replace` **OR** `CSS`, those are two different solutions, isnt? For `CSS` Do I need make calculations so image appear on the right of `"Login"` or is automatic? – Juan Carlos Oropeza Jun 10 '16 at 04:24
  • I already put it center right for the position. And yes, you can specify the position of the image via CSS – denchu Jun 10 '16 at 05:21
  • I mean the bg size is `20x20` I guess that is image size? But your width is 50px so I guess that is for `LOGIN` text? So do I have to calculate the size if I change text? – Juan Carlos Oropeza Jun 10 '16 at 05:41
  • The bg-size is for the image, the width is for the width of the ActionLink. It depends on the length of the text that you put in the ActionLink. – denchu Jun 10 '16 at 06:29
0

You need to use Url.Action instead. Here's the cleanest way you can do it:

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