Correct practices for where to put images and static files in an ASP.NET MVC application?

Question

There is a directory in the standard ASP.NET template "Content" where most people seem to be putting in images and css files etc.

For instance stackoverflow's logo:

_{(source: stackoverflow.com)}

actually is refered to with a server path containing 'content' in the URL (just do View Source for any SO page and you'll see this). So they obviously are storing images in "content/images/...".

src="/Content/Img/stackoverflow-logo-250.png" 

Edit: Sometime in the last 10 years they changed the path - but this is what it used to be.

I dont particularly like this. My HTML ends up with /content all over it, and its slightly harder to migrate existing pages that just have /image. Fortunately my stylesheet doesnt end up with content all over it, as long as I save it in content\site.css.

An alternative is to put an images directory in the root, but then you get images at the same level as Controllers and Views which is pretty horrible.

I'd wondered about trying to add a redirection rule like this :

routes.RedirectRoute(
   "images rule",
   "Images/{*}",
   "Content/Images/{1}");    // this is NOT valid code - I made it up

But that code doesnt work because I just made it up. I could use a third party redirection/rewriting plug-in but I want to keep everything 'pure' within the MVC model.

What has anyone else found in this area? Or is everyone just happy with an extra ("/content".length) bytes in their source for every image they serve.

Answer 1

To be honest, I don't think its really something to worry about... "/Content" is going to make a pretty minimal contribution to your page size. If you still want to do it, here are some options:

Option 1, if you are running on your own server, is to check out the IIS URL Rewrite module: http://learn.iis.net/page.aspx/460/using-url-rewrite-module/

Option 2 is to use either RedirectResult, or ContentResult, to achieve the same effect in the MVC framework

First, map a "catchall" route under "Images/" to a controller action, like so

routes.MapRoute("ImageContent", 
                "Images/{*relativePath}", 
                 new { controller = "Content", action = "Image" })

Make sure it is above your standard "{controller}/{action}/{id}" route. Then, in ContentController (or wherever you decide to put it):

public ActionResult Image() {
    string imagePath = RouteData.Values["relativePath"]
    // imagePath now contains the relative path to the image!
    // i.e. http://mysite.com/Images/Foo/Bar/Baz.png => imagePath = "Foo/Bar/Baz.png"
    // Either Redirect, or load the file from Content/Images/{imagePath} and transmit it
}

I did a quick test, and it seemed to work. Let me know in the comments if you have any problems!