ASP.NET MVC ActionLink vs RedirectToAction for images in areas

Question

I have an issue with an image that is a little hard to explain so hopefully this will make sense. I am using ASP.NET MVC 4 Razor. I have one area setup and I am using a layout page that in the root. Everything is working fine except one small issue. When I use an ActionLink in an area, my page renders just fine including the layout page except for the image on the page. If I use RedirectToAction in my controller, everything renders fine including the image. I can see the location of the image is rendered differently but I'm not sure why or how to fix it.

Here's my layout page that located in the root:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewData("Title") - eLAD</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
       <div id="container">
         <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><img src="../../Images/digital_blue_std.jpg" alt="" height="50px" style="vertical-align:middle" /> @Html.ActionLink("company name", "Index", "Home")</p>
                 </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("About", "About", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home", New With {.area = ""}, Nothing)</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required:=false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
         </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year</p>
                </div>
            </div>
        </footer>
       </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required:=False)

     </body>
</html>

And I have an area called OwnedQuote that most of my views and controllers are in. So let's say I have this URL /OwnedQuote/AircraftRegNumber/Create that I got to using RedirectToAction in a controller (omitting the http localhost portion of the URL due to stack overflow requirements). If you look at the properties of the image in this case the url for the image is: /Images/digital_blue_std.jpg which is what I want. However, when is use an actionlink from that page to another page in the same area, the url for the same image is: /OwnedQuote/Images/digital_blue_std.jpg. Notice the addition of the area now which is a problem because the image does not exist in this location. My action link command is just:

@Html.ActionLink("Referral to UW", "ReferToUW", "Referral", New With {.id = Model.Aircraft.ID}, Nothing)

Everything else from the layout page and the body section is correct. So I'm not sure why the image URL is different when using Html.ActionLink vs RedirectToAction. I need it to act the same as RedirectToAction.

Erik Funkenbusch Erik Funkenbusch · Accepted Answer · 2014-03-24T21:40:32

First, don't use paths like that in your application. You want to use a known reference point. Since you are using MVC 4, which uses Razor 2, razor natively understands your site root. So you need only do something like this:

<img src="~/Images/myImage.jpg">

Where ~ is the root of your site. In MVC3 you had to use Html.Content like this:

<img src="@Html.Content("~/Images/myImage.jpg")" >

The reason for your problem is that you're ending up at different URL's, and because of MVC Routing default action processing, you can view the same action from two distinct url paths. The problem is that the images don't exist at the same offset for both paths, so you get the problem. Using the site relative path solves the problem.

Remember when you do something like "../../blah" it takes the relative path from the URL path, not the pages actions path. This is because the browser is loading the image, not the server, and the browser doesn't know anything other than what it's current path is.

ASP.NET MVC ActionLink vs RedirectToAction for images in areas

1 Answers