为什么当EnableOptimizations = true时css图像不会显示？

Question

我使用mvc4，当我改变

BundleTable.EnableOptimizations = true;

在BundleConfig.cs文件中，我的图片无法加载并失败。

我的图片在我的解决方案中的位置：

 themes/default/Profile/images/abc.png

在我的BundleConfig中：

  bundles.Add(new StyleBundle("~/Content/profile/PRA")
  .Include("~/Content/themes/default/profile/mycss.css"));

我的css：

.sampleback{
                background-image: url('images/abc.png');
            }

如果我想使用BundleTable.EnableOptimizations = true; 我必须参加我的css课程直到它起作用：

.sampleback{
              background-image:url('../themes/default/Profile/images/abc.png');
         }

这是一个错误吗？或者我的方向错了？

Answer 1

外部CSS资源中的相对路径被解析为相对于CSS资源本身的路径。

因此，如果未绑定的CSS位于一个路径中，并且捆绑的CSS从另一个路径下载，那么当然相对路径将不再正确。 （除非捆绑机制会处理它，并在它写入捆绑的CSS之前纠正这些相对路径本身。）

最简单的解决方案是始终使用相对于域根的路径，因此从/开始。当然，这会使你的项目不那么灵活，如果你这样做。有一天将它移动到子文件夹。如果你想避免这种情况，那么找一种解析你的CSS的解决方案，并允许你使用变量/常量来定义一个中心位置的基本路径。