小编典典

MVC4 StyleBundle 无法解析图像

all

除了如果可以的话,我想坚持使用 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/.

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


阅读 71

收藏
2022-04-24

共1个答案

小编典典

根据这个关于MVC4 css bundling and image
references
的线程,如果你将你的包定义为:

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

如果您在与组成包的源文件相同的路径上定义包,则相对图像路径仍然有效。捆绑包路径的最后一部分实际上是file name针对特定捆绑包的(即,/bundle可以是您喜欢的任何名称)。

这仅在您将同一文件夹中的 CSS 捆绑在一起时才有效(我认为从捆绑的角度来看这是有意义的)。

更新

根据@Hao Kung 下面的评论,或者现在可以通过应用CssRewriteUrlTransformation更改捆绑时对 CSS 文件的相对
URL
引用
)来实现。

注意:我尚未确认有关在虚拟目录中重写为绝对路径的问题的评论,因此这可能不适用于所有人(?)。

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