How to insert an image in ActionLink (View model)

Question

I want to display an image for each bike, but these codes didn't work:

<ul>
@foreach (var bike in Model.Bikes)
 {
     <li>@Html.ActionLink(bike.Name, "Categories", new { id = bike.Id, name = bike.Name, @class = "image"}, null)</li> 
 } 
</ul>

Anybody can help me with this, thanks a lot!

I just updated my CSS file:

a.image {
    background: url('~/Store Project(new)/Store Project/AdventureCycle/Content/Images/') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}

Answer 1

There is no inbuilt html helpers for Image Hyperlinks.we have to create custom html helper inorder to get this requirement.So refer the below links you will get an idea.

Action Image MVC3 Razor

Based upon your comment.i give the solution like this:

@if (Convert.ToString( bike.Name) == null || Convert.ToString(bike.Name) == "")
            {
                bike.Name = "Empty";
            }
            @Html.ActionLink(Convert.ToString(bike.Name), "Categories", new { @id =bike.Id, @name = bike.Name },new{ @class = "image" })

Here i gave "Empty" if bike.Name is Null or Empty.