mvc4 actionlink image

Question

I am trying to replace the infamous "your logo here" in _Layout.cshtml for the ASP.NET MVC4 Web Application. The following works (works as in the image is displayed) for the main page (Home view) but not on the contact view (no image but the action works). I need this to work both in the development environment as well as the production environment.

< p class="site-title">@Html.ActionLink(" ", "Index", "Home", new
  {
  style = "background: url('./Images/login_sm.bmp') no-repeat center right;
          display:block; height:84px; width:264px;"
  })
</ p>

Answer 1

Images are always relative to the location of the current CSS.

If you are using inline CSS you should use url helpers:

@Html.ActionLink(
    " ", 
    "Index", 
    "Home", 
    null , 
    new { 
        style = "background: url('" + Url.Content("~/images/login_sm.bmp") + "') no-repeat center right; display:block; height:84px; width:264px;" 
    }
)

or if you decide to define a CSS class:

@Html.ActionLink(
    " ", 
    "Index", 
    "Home",  
    null , 
    new { 
        @class = "mylink" 
    }
)

where you have defined the .mylink rule in ~/content/Site.css:

.mylink {
    background: url('../images/login_sm.bmp') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}

Answer 2

The best way you can do as below

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" ... />"))

which perfectly working

Answer 3

You can use this

<a href='@Url.Action("action", "Controller")'>
<img src='@Url.Content("~/images/imageName.png")' /></a>

this is working fine and it works similar to @Html.ActionLink("linkName","action","Controller")