CSS and Javascript and images in ASP.NET MVC 5 website won't display after deployment

Question

My problem is that after I have uploaded my website to an online server, the html pages display completely fine except for the images, CSS and JavaScript. I know exactly why this is happening and it is related to Ogglas answer in this stackoverflow question: CSS, Images, JS not loading in IIS

Baisically, I can see that in Google debugger this displays:

<link href="/Content/css?v=oJetwWdJWV96VzkmdyDS6ZG-GSKbNSyRhMkB7__C1dQ1" rel="stylesheet">

<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

However there should be a ~ before /Content and /bundles so the link should be

<link href="~/Content/css?v=oJetwWdJWV96VzkmdyDS6ZG-GSKbNSyRhMkB7__C1dQ1" rel="stylesheet">

and

<script src="~/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

As the ~ symbol indicates the Root directory of the application.

Problem is that I do not know how to correct this problem in my ASP.NET MVC 5 application.

My bundleConfig.cs file already looks like this:

 public static void RegisterBundles(BundleCollection bundles)
    {


        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/toastr.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                   "~/Content/toastr.css",
                  "~/Content/site.css"));
    }
}

So I don't understand where I am supposed to make this modification so that after deploying my website, my style links include the ~ symbol .

Thisara Subath · Accepted Answer · 2018-07-13 09:08:35Z

1

Try this in your bundle config

 BundleTable.EnableOptimizations = false;

answered Jul 13, 2018 at 9:08

Thisara Subath

7437 silver badges17 bronze badges

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

2 Comments

k1r4n Over a year ago

Thank you so much this worked perfectly. I did some more research and found that if I add this line of code to my bundleconfig file then I must put: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Styles.Render("~/Content/css") on every View. So now all my styles are working fine. However, my images are not displaying. The paths look completely fine so I don't know why this could be?

k1r4n Over a year ago

Its ok I worked it out...I realized I didn't even have the images actually in the folder !! lol

Collectives™ on Stack Overflow

CSS and Javascript and images in ASP.NET MVC 5 website won't display after deployment

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related