MVC无法在使用绑定时使用背景url显示图像

Question

我有一个MVC4项目，它具有以下结构：

/Content/css/sprites/topbar.css

/内容/图像/topbar.png

在css文件中，我试图使用引用图像

background: url('../../images/topbar.png')

但是图像没有显示。如果我更改它，使图像位于：

/Content/css/sprites/topbar.png

并将css更改为：

background: url('content/css/sprites/topbar.png')

它是有效的，但这打破了我的项目结构。

有什么想法吗？

编辑

我没有提到其他事情，因为我认为它不相关，但它似乎影响了这一点！

我使用@System.Web.Optimization.Styles.Render("~/MainStyles")来捆绑和缩小css，但如果我迈出这一步，它就会像我预期的那样工作。我将如何使这一切与我的项目结构一起工作并使用捆绑？

Answer 1

不知道是否有其他人有这个问题。但是你可以在css中使用相对路径。关键是使用指向实际css所在文件夹的虚拟路径注册捆绑包。通过这种方式，MVC将从该路径中的处理程序请求绑定的css。

尝试将捆绑包注册更改为：

bundles.Add(new StyleBundle("~/Content/css/sprites/topbar")
              .Include("~/Content/css/sprites/topbar.css")
            );

然后在您的视图中@Script.Render("/Content/css/sprites/topbar")

Mvc将从/Content/css/sprites/topbar?{some-crazy-token-thing} 请求您已编译的css捆绑包

Answer 2

我发现了问题所在。

它确实是MVC中使用的绑定和缩小。当css查找图像时，它在我的捆绑包所指向的文件夹中查找当前文件夹，而不是css文件所在的文件夹。

Answer 3

尝试使用：

.social ul li a.blog { background: url(@Url.Content("~/Content/img/houseIcon.png")) no-repeat left top; }

关于在CSS中使用剃刀，请参阅http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine

Answer 4

我建议将CSS引用的图像存储在与相同的文件夹中，或者保存CSS文件本身的目录的子文件夹中，这样您就可以在CSS文件中使用最小长度的相对路径。

如果你的应用程序总是位于网站的根目录中，你可以使用根相对路径（例如background-image:url（"/content/images/toopbar.jpg"）；）

嗯，但是"../images/topbar.png"应该也可以。你试过了吗？