css - 将网站部署到应用程序时的 mvc bundle 和相关 css 图像

Question

要将相对图像路径转换为绝对路径，在 stackoverflow 中会提出和回答许多问题，例如:

MVC4 StyleBundle not resolving images

建议添加 new CssRewriteUrlTransform() 如下:

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

这实际上曾经救过我。但是现在我将我的网站部署到应用程序(不是网站的根目录)仍然有问题:

应用程序是:

http://localhost/sample/

但是图片 url 是这样的:

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

虽然它应该是:

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

虽然 bundle 的 css 链接本身是正确的并且可以工作。

Answer 1

如果不涉及虚拟目录，则以下代码将执行:

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

但是当使用 VirtualDirectory 时，CssRewriteUrlTransform 将重写到 Host 而不是 Host/VirtualDirectory。解决方案是派生 CssRewriteUrlTransform，这在此处进行了充分讨论: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);           
    }
}