小编典典

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/

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


阅读 365

收藏
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