CSS, Images, JS not loading in IIS

The problem may be that IIS is not serving Static Content, which you can set up here:

Original source: http://adilmughal.com/blog/2011/11/iis-7-not-loading-css-and-image/, now available at the Wayback Machine

Windows 10:

I had the same problem, an unauthenticated page would not load the CSS, JS and Images when I installed my web application in ASP.Net 4.5 in IIS 8.5 on Windows Server 2012 R2.

1. I had the static content role installed
2. My Web Application was in the wwwroot folder of IIS and all the Windows Folder permissions were intact (the default ones, including IIS_IUSRS)
3. I added authorization for all the folders that contained the CSS, JS and images.
4. I had the web application folder on a windows share, so I removed the sharing as suggested by @imran-rashid

Yet, nothing seemed to solved the problem. Then finally I tried setting the identity of the anonymous user to the App Pool Identity and it started working.

I banged my head for a few hours and hope that this response will save the agony for my fellow developers.

I would really like to know why this is working. Any thoughts?

I had a similar error, my console looked like this:

My problem was that I was running my site in a sub folder since the company was using one top domain and no sub domains. Like this:

host.com/app1

host.com/app2

My code looked like this for including scripts which worked fine on localhost but not in app1 or app2:

<link rel="stylesheet" type="text/css" href="/Content/css/font-awesome.min.css" />

Added a tilde sign ~ to src and then everything worked:

<link rel="stylesheet" type="text/css" href="~/Content/css/font-awesome.min.css" />

Explanation of ~ vs /:

• / - Site root
• ~/ - Root directory of the application

/ will return the root of the site (http://host.com/),

~/ will return the root of the application (http://host.com/app1/).

Try removing the staticContent section from your web.config.

<system.webServer>
    <staticContent>
        ...
    </staticContent>
</system.webServer>

This might not answer your question but I've been banging my head with the same symptoms with a new IIS installation. CSS, JS and images were not showing up. Was due to the "Static Content" role not being installed in IIS 7.5.

You probably have Windows authentication enabled in your web.config. On a local machine, your Windows credentials are automatically passed and it works. On a live site, you are treated as an anonymous user (IE setting can control this, but don't modify this unless you really know what you are doing).

This causes the following:

• You are required to explicitly login.
• Resources like scripts and CSS are not served on the login page because you are not authenticated.

This isn't broken, just working as intended, but to "fix" this:

• Change the authentication type in the web.config if you don't want any login.
• And/or add a web.config in the directory(s) containing CSS, images, scripts, etc. which specifies authorization rules.

This is an authentication issue. In my case, it solved by below steps: 1- Go to IIS manager, in the left pane, expand the server root and select your web application from Sites node. 2- In the Home screen, go to IIS section and select Authentication. 3- Enable Anonymous Authentication. 4- Then, select Edit and set Edit Anonymous Authentication Credentials to Application pool identity.

Add this to your web.config

<location path="Images">
    <system.web>
        <authorization>
            <allow users="*" />
        </authorization>
    </system.web>
</location>

Use this in configuration section of your web.config file:

<location path="images">
<system.web>
  <authorization>
    <allow users="*"/>
  </authorization>
</system.web>
</location>
<location path="css">
<system.web>
  <authorization>
    <allow users="*"/>
  </authorization>
</system.web>
</location>
<location path="js">
<system.web>
  <authorization>
    <allow users="*"/>
  </authorization>
</system.web>
</location>

This issue occurs when IIS does not render the static contents like your JS, CSS, Image files.

To resolve this issue, you need to follow the below steps:

GO to Control Panel > Turn Windows features on or off > Internet Information Services > World Wide Web Services > Common HTTP Features > Static Content.

Ensure that static content is turned on.

Bingo. And you are done. Hard-reload the page and you will be able to see all the static contents.

For me adding this in the web.config resolved the problem

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true" >
      <remove name="UrlRoutingModule"/>    
    </modules>
</system.webServer>

My hour of pain was due to defining MIME types in the web.config. I needed this for the development server but local IIS hated it because it duplicated MIME types... once I removed these from the web.config the problem with js, css, and images not loading went away.

In my case,

IIS can load everything with localhost, but could not load my template files app.tag from 192.168.0.123

because the .tag extension was not in the list.

To fix this:

Go to Internet Information Service (IIS)

Click on your website you are trying to load image on

Under IIS section, Open the Authentication menu and Enable Windows Authentication as well.

One suggestion I have found helpful in the past when developing sites in localhost test environment when working with a copy of production site. Make sure that you comment out the canonical tags:

  <!--<base href="http://www.example.com/">//-->

If you tried all the above solutions and still have problems, consider using the method ResolveClientUrl() of ASP.NET .

A script for Example :

Instead of using

<script src="~/dist/js/app.min.js" ></script>

Use the method

<script src="<%= ResolveClientUrl("~/dist/js/app.min.js") %>" ></script>

This was my solution that worked for a friend I was helping!

I had this same problem. For me, it was due to Cache-Control header being set at the server level in IIS to no-cache, no-store. So for my application I had to add in the below to my web.config:

<httpProtocol>
    <customHeaders>
        <remove name="Cache-Control" />
    </customHeaders>
</httpProtocol>

I had the same problem but while migrating my ASP.NET MVC5 legacy (has is) from

an old Windows Server 2012 R2 to a Windows Server 2022.

I my case (thanks to @Hiep on this thread) i found out what the problem was...

My old IIS didn't support (by default) ".woff" MIME type so i manualy added it to web.config in specific section like so :

<staticContent>
   <mimeMap fileExtension=".woff2" mimeType="application/font-woff2"/>
</staticContent>

When i try to see "MIME Types" on IIS for that site it will give strange config error and load that "MIME Types" area of IIS clean with no MIME Types (zero)

After i removed that code from my web.config "magically" all MIME Types where correctly loaded on the respective IIS section and site started working as expected.

Thanks Hiep.

for me this solved my problem

1. To Remove the HttpNotFoundHandler tag from the handlers section of web.config to allow All file types

OR

2. To Add StaticFileHandler tags to allow my favorite file types (to avoid 404 error)

  <system.webServer>
    <handlers>

      <!-- ADD THESE -->

      <add name="MyContentHandler"  path="*.css" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
      <add name="MyContentHandler2" path="*.png" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
      <add name="MyContentHandler3" path="*.jpg" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
      <add name="MyContentHandler4" path="*.js"  verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />

      <!-- OR REMOVE THESE -->

      <remove name="MyBlockViewHandler" />
      <add name="MyBlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>

One possible cause of this is that your application expects to run on port 443 (standard SSL port) and port 443 is already in use. I have run into this several times with developers trying to run our application while Skype is running on their computers.

Incredibly, Skype runs on port 443. This is a horrible design flaw in my opinion. If you see your application trying to run on 444 instead of 443, shut down Skype and the problem will go away.

I added app.UseStaticFiles(); this code in starup.cs of Configure method, than it is fixed.

And Check your permission on this folder.

For Images use

@Url.Content("~/assets/bg4.jpg")

on a Style use this

style="background-image:url(@Url.Content("~/assets/bg4.jpg"))

In my case when none of my javascript, png, or css files were getting loaded I tried most of the answers above and none seemed to do the trick.

I finally found "Request Filters", and actually had to add .js, .png, .css as an enabled/accepted file type.

Once I made this change, all files were being served properly.

If you're seeing 403 errors in your browser console, check your MVC Bundle Config. Bundle names should not match any existing folder names in your project.

eg.

bundles.Add(new StyleBundle("~/Content/css")...

...would cause issues for IIS if the folder structure $(ProjectDir)\Content\css exists in your project, since it tries to look within the existing folder for bundle content that's not there.

Instead just use something like:

bundles.Add(new StyleBundle("~/Content/cssbundle")...

I had exact same problem, tried all of the suggestions but got nothing. Bugged me hours. Turned out my ISP blocked port 80 for some reasons.

Advice: check your traffic. Make sure port 80 works both locally (i.e. firewall) and externally.

I was able to follow these instructions: https://serverfault.com/a/1063414/402955

There is a Connect as... setting in IIS that can also be configured. I set both my Application Pool Identity to the user account, and also set the Connect as... settings to that same account on the site itself.

Migration from IIS 8.5 to IIS 10, had same issue. Eventually changed to this

<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

and it worked.