ASP.NET MVC - Routing Issue

Question

This is the URL in question, that causes all of my images to break.

http://www.foo.com/payment/receipt/stapia.gutierrez/201110040000034

All of my content (images and whatnot) is declared in my _Layout.cshtml file. I believe this is an issue with my routing.

Here are the relevant parts of my Global.asax routing area:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "AllPayments",
        "payment/receipt/{username}",
        new { controller = "Payment", action = "AllPayments" }
    );

    routes.MapRoute(
        "IndividualPayment",
        "payment/receipt/{username}/{id}",
        new { controller = "Payment", action = "SinglePayment" }
    );

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );
}

This how my images are declared in my _Layout.cshtml file:

<img src="../../Content/SiteImages/banner1.jpg" width="200" height="200" />
<img src="../../Content/SiteImages/banner2.jpg" width="200" height="200" />
<img src="../../Content/SiteImages/banner3.jpg" width="200" height="200" />

Where normally my images would src to

www.foo.com/Content/SiteImages/logo.png ,

in this particular view, they are changed to

www.foo.com/payment/Content/SiteImages/logo.png

How can I fix this issue? What is causing my images src to change in this particular view?

Answer 1

Since you are viewing a specific payment, you are one step deeper into the url.

Where

<img src="../../Content/SiteImages/banner1.jpg" width="200" height="200" />

would work on the AllPayments page, you need

<img src="../../../Content/SiteImages/banner1.jpg" width="200" height="200" />

on the individual payment page.