mvc bundling and relative css image when website is deployed to an application

Question

To convert relative image paths to absolute path there are many questions asked and answered in stackoverflow like this one:

MVC4 StyleBundle not resolving images

that suggest adding new CssRewriteUrlTransform() as below:

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

and this actually have saved me before. but now that I deploy my website to an application (not root of a website) there is still a problem:

the application is:

http://localhost/sample/

but the image urls are like:

http://localhost/css/imgs/spirit.png

while it should be:

 http://localhost/sample/css/imgs/spirit.png

although the bundled css link itself is correct and working.

it is an application and virtual directory in IIS. in this sample the application name is **sample** — Ashkan Mobayen Khiabani, Sep 18 '15 at 08:47
Look at http://stackoverflow.com/questions/19765238/cssrewriteurltransform-with-or-without-virtual-directory which completely describes *what happened* and *what you need to do*. — Amirhossein Mehrvarzi, Sep 20 '15 at 09:00

score 8 · Accepted Answer · edited May 23 '17 at 12:17

If there are no virtual directories involved the following code would do:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

but when VirtualDirectory is used CssRewriteUrlTransform will rewrite to Host instead of Host/VirtualDirectory. the solution is to derive CssRewriteUrlTransform which is fully discussed here: ASP.NET MVC4 Bundling with Twitter Bootstrap:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

score 1 · Answer 2 · answered Sep 18 '15 at 08:48

This is actually just another issue with optimizations in general not working correctly when the app is running as a virtual directory.

Since you're using a virtual directory for hosting your website, So you should make a wrapper that will call CssRewriteUrlTransform with the fixed path:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
        public string Process(string includedVirtualPath, string input)
        {           
            return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
        }
}

More info.

mvc bundling and relative css image when website is deployed to an application

2 Answers2