Re-direct image requests in RouteConfig file (ASP.NET MVC)?

Question

I'm having a problem using a jQuery plugin in an ASP.NET MVC Project, where images are being searched for in locations that don't exist.

I am receiving missing image errors like such:

GET http://localhost:51710/Home/img/chesspieces/wikipedia/bN.png 404 (Not Found) 

But I have no idea why it seems to be searching for images inside of localhost/Home like that?

I want to search inside a content folder for the images of course, (e.g. \Content\chessboard.js\img), not a view/view controller like localhost/Home.

Why is this, and how can I achieve what I want?

My routeconfig file is still in it's default state:

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

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

Edit:

Here's the line in chessboard.js, where I can change the route after localhost/Home, but not localhost/Home itself:

cfg.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';

Answer 1

Use absolute path:

cfg.pieceTheme = '/img/chesspieces/wikipedia/{piece}.png'; // note the '/'

Answer 2

There is a very helpful Url extension to point to appropriate location of your content files (like images):

@Url.Content

Which makes it possible to get your files from appropriate content directories.

@Url.Content("~/Content/chessboard.js/img")

In case there is no possibility to use Razor syntax inside this file you could try this:

cfg.pieceTheme = "~/Content/chessboard.js/img/chesspieces/wikipedia/{piece}.png';