CSS, Images, JS not loading in IIS

Question

My all applications were working fine but suddenly all sites under IIS are not loading css, images, scripts. It redirect to login page.

If i login it works fine. e.g. mysite.com/Account/LogOn?ReturnUrl=%2fpublic%2fimages%2ficons%2f41.png

On my local machine it works fine without login.

Answer 1

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

Source: http://adilmughal.com/blog/2011/11/iis-7-not-loading-css-and-image/

Windows 10:

Answer 2

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?

Answer 3

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/).

Answer 4

Try removing the staticContent section from your web.config.

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

Answer 5

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.

Answer 6

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.

Answer 7

It was windows permission issue i move the folder thats it inherit wrong permissions. When i move to wwwroot folder and add permission to iis user it start working fine.

Answer 8

Add this to your web.config

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

Answer 9

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>

Answer 10

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.

Answer 11

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

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

Answer 12

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.

Answer 13

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.

Answer 14

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.

Answer 15

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.

Answer 16

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/">//-->

Answer 17

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!

Answer 18

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>

Answer 19

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.

Answer 20

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

And Check your permission on this folder.

Answer 21

For Images use

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

on a Style use this

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

Answer 22

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.

Answer 23

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")...

Answer 24

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.