[Resolved] Images|Fonts does not display while using Bundling asp.net MVC

Asp.NET MVC Bundling

Bundling is a facility in asp.net MVC (in newer versions) to manage style sheets and javascripts in a minimized form in your web application. Bundles are registered at the time of Application Start. and theses bundles are configured at BundleConfig.cs file in App_Start folder. Some examples of bundle configurations are given below.

Javascript bundling

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

CSS bundling

 bundles.Add(new StyleBundle("~/Content/jquery-ui").Include(
                "~/Content/jquery-ui.css"));

Resolve Fonts|Images Display Problem in Bundling

Images and fonts are used with the style or javascript files will not be visible when the bundle configuration is not done correctly. For an example I have a style folder in Content folder and the images related to the style folder is placed in other folder called images in Content folder. If I do bundling in following way, it will not take the images for the styles

MVC Content Folder Structure

Fault Bundling

 bundles.Add(new StyleBundle("~/Content/stylecss").Include(
                "~/Content/style/style.css"));

Above bundling causes changes in the folder structure, so the images will not be taken, you have to do following type of bundling to overcome that.

Correct Bundling

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

In the above bundling both are placed in the style folder (after bundling too). So .net framework is able to find the images folder because of the correct folder structure we have given at the bundling time.