One issue that often arises on MVC 4 websites is the discrepancy between release and debug modes when dealing with CSS bundles. While this may not be the case for everyone, the symptoms are worth noting.
Let me illustrate with an example.
Imagine you have a bundle structured like this:
var styles = new StyleBundle("~/Content/css").Include(
"~/Content/toastr.css",
"~/Content/flags/stylesheets/flags16.css",
"~/Content/flags/stylesheets/flags32.css",
"~/Content/Site.css")
And within flags16.css, you have:
background:url('flags/images/flags16.png');
Which references the file in
~Content/flags/images/flags16.png
In release mode (with compilation debug="false" in web.config), everything works fine as all CSS files in the bundle are served as one file located at ~/Content/css with the relative path 'flags/images/flags16.png' correctly pointing to the image file. However, in debug mode, ASP.NET MVC disables minification, causing @Styles.Render("~/Content/css") to render links to each individual file in the bundle. This results in path issues, and the images in flags16.png may not display.
To resolve this, consider moving the .css file containing image references to the same location pointed to by the bundle (i.e., ~/Content in this scenario) so that the paths remain consistent between minified and raw versions.
UPDATE If your application is not MVC 4 and you face issues when it's not at the root of the website (e.g., localhost/myapp), check the paths in your image references. Absolute paths ('/somepath/mypic.png') may need adjusting when the app is in localhost/MyApp to
localhost/MyApp/somepath/mypic.png
. You can address this by using
@Url.Content(~/somepath/mypic.png)
in cshtml files or by using relative paths in your CSS for image references.