如何使用StyleBundle设置图片路径

在本文中，您将学习如何解析css文件中的绝对路径。

我们在MVC教程中了解到，Bundle类的Include()方法接受带有虚拟路径的文件名。

如果您打开浏览器调试器，您可以看到css文件已加载，状态为200。

但是，如果site.css包含带有绝对路径的图片，那么图片将不会加载。例如，我们下面的site.css包含如下所示的页脚样式。

footer
{
    background:url(../images/border_btm.png) top repeat-x;
    padding:15px;
    color:#618eac;
    margin-top:15px;
}

上述页脚样式引用了背景图片，该图片位于单独的images文件夹中。

然而，浏览器会显示404错误，因为它找不到图片文件。

浏览器会考虑css文件中给定的任何路径的虚拟路径。它将尝试从托管服务器加载图片。

解决方案:

如果您在css中使用图片的绝对路径，则可以指定转换类CssRewriteUrlTransform。

CssRewriteUrlTransform类将url重写为绝对路径。

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

现在，css文件中的图片路径将被转换为绝对路径。

如上图所示，图片是使用根文件夹中的绝对路径加载的。