CODEWITHSUNDEEP
c#asp.net-mvc-4
Gina Marano
Gina Marano

Reputation: 1803

mvc4 actionlink image

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>

Upvotes: 9

Views: 47374

Answers (5)

Illidan
Illidan

Reputation: 4237

I found that when required high level of <a> tag customization (e.g. other tags inside anchor), it is better to do it yourself.

I was using UrlHelper.GenerateUrl method for generating URL, and then I manually created <a> tag and used generated URL.

Upvotes: 0

Amit Ghute
Amit Ghute

Reputation: 61

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

Upvotes: 4

Muflix
Muflix

Reputation: 6778

I edited Dilip0165 solution a little

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"" + @Url.Content("~/Content/assets/img/logo.png") + "\" alt=\"Link description\" title=\"Link description\" />"))

If you want it without default border, add this to your css

img {border: 0px;}

Upvotes: 1

Dilip Langhanoja
Dilip Langhanoja

Reputation: 4525

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

Upvotes: 12

Darin Dimitrov
Darin Dimitrov

Reputation: 1038800

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

Upvotes: 30

Related Questions