MVC4 StyleBundle无法解析图像

小编典典

MVC4 StyleBundle无法解析图像

css

除非我愿意，否则我会坚持使用MVC的捆绑软件。我脑部崩溃，试图弄清楚指定样式束（例如独立的CSS和jQuery UI等图像集）的正确模式是什么。

我有一个典型的MVC站点结构，/Content/css/其中包含我的基本CSS，例如styles.css。在该css文件夹中，我还有子文件夹，例如/jquery- ui包含其CSS文件和一个/images文件夹的子文件夹。jQuery UI CSS中的图像路径是相对于该文件夹的，我不想弄乱它们。

据我了解，当我指定a时，StyleBundle我需要指定一个虚拟路径，该路径也与真实内容路径不匹配，因为（假设我忽略了通往Content的路由）IIS将尝试将该路径解析为物理文件。所以我指定：

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

使用以下方式呈现：

@Styles.Render("~/Content/styles/jquery-ui")

我可以看到请求发送到：

http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

这将返回正确的，缩小的CSS响应。但是随后浏览器发送一个请求，要求相对链接的图像为：

http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

这是一个404。

我知道我URL的最后一部分jquery- ui是无扩展名URL，这是我程序包的处理程序，因此我可以看到为什么对图像的相对请求很简单/styles/images/。

所以我的问题是处理这种情况 的正确方法 是什么？

阅读 333

2020-05-16

共1个答案

小编典典

根据MVC4 css捆绑和图像引用上的该线程，如果将捆绑定义为：

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

如果您在与构成包的源文件相同的路径上定义包，则相对映像路径仍将起作用。捆绑软件路径的最后一部分实际上就是filename该特定捆绑软件的（即，/bundle可以是您喜欢的任何名称）。

仅当您将同一文件夹中的CSS捆绑在一起时才有效（从捆绑的角度来看，我认为这很有意义）。

更新资料

根据@HaoKung的以下评论，现在也可以通过应用CssRewriteUrlTransformation绑定时更改CSS文件的相对URL引用）来实现。

注意：我尚未确认有关重写虚拟目录中的绝对路径的问题的注释，因此这可能不适用于所有人（？）。

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

2020-05-16