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.

Andrew Stanton-Nurse · Accepted Answer · 2009-01-23 23:46:30Z

3

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!

answered Jan 23, 2009 at 23:46

Andrew Stanton-Nurse

6,2941 gold badge31 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon_Weaver Over a year ago

actually worrying about the extra number of bytes was my attempt at a joke. i just dont like to see <img src="../content/images/...">. it just doesnt feel right, but if thats the established convention then thats ok. your implementation looks nice and clean though. thanks

Chad Moran · Accepted Answer · 2009-01-24 22:55:31Z

2

It's usually better to put images under a different sub domain. The reason for this is browsers limit the number of connections per URL. So if you use http://static.mysiste.com now the browser can open more concurrent connections due to it being in a different URL.

answered Jan 24, 2009 at 22:55

Chad Moran

12.9k2 gold badges53 silver badges72 bronze badges

2 Comments

Simon_Weaver Over a year ago

i actually jsut learned about that yesterday. i couldnt believe IE STILL only downloads 2 files at a time. i knew it limited - but TWO files!!

Simon_Weaver Over a year ago

i'll probably have to write an Html helper to write out an image tag that is confuguration driven to determine the root for my images. that would have the added bonus of getting to stop adding 'content' to all my images. Html.Image("images/backgrounds/1.jpg") which would go to config for base path

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related