Bootstrap图标未显示在已发布的ASP.NET MVC应用程序中

Question

---注意:转到EDITED 2部分进行总结----

我有一个ASP.NT MVC(4)应用程序.我集成了(twitter)Bootstrap.Bootstrap工作正常,但是当我发布应用程序时,图标无法正确显示.

我试图重新发布应用程序但没有成功.

为了澄清我在下面放了一些图片.

当我从VS2013运行我的应用程序时,结果就是这样(这没关系):

在展台,IE和Chrome.

但是当我运行已发布的应用程序时,结果是这样的(这不是正常的):

• 铬

• IE(10)

不知何故,这个问题与评估的CSS有关,但我不知道这可能发生在哪一点.

本地应用程序中评估的css是这样的(可以):

• 铬

• IE

但在已发布的应用程序中我有这个(这不是正常的):

• 铬:

• IE:

有些人经历过这种行为吗？

我能做些什么来解决这个奇怪的问题？

--------------------------- EDITED ---------------------- --------

我得到(字体文件.eot,.svg,.ttf和.woff)要发布我的应用程序时包括在内.当我访问默认页面(应用程序根目录http://localhost/)时,这是显示图标的页面,Chrome的"开发者工具网络"选项卡中显示的文件是:

在包含文件之前,我收到文件的404错误,所以我猜他们会继续被请求,即使它们没有显示在网络选项卡中.

但是,图标显示不正确.

------------------------ EDITED 2 ------------------------ ---

好吧,我在IIS 7中重新启动我的站点.请求开始被触发.这些是Chrome开发者工具网络标签中显示的文件请求:

然后resquest正在寻找文件:/Content/themes/fonts/但它们在:/Content/themes/base/fonts/

该base文件夹包含一个包含bootstrap文件的bootstrap.css文件夹.在CSS文件中有这个类参考字体文件:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

似乎对字体文件的引用很好,因为文件树是这样的:

我可以将课程改为:

@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../base/fonts/glyphicons-halflings-regular.eot');
      src: url('../base/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../base/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../base/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../base/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
    }

但是,我实际上会知道这是怎么回事以及如何解决它!此外,图标将显示在已发布的站点中,但不会显示在本地站点中(从带有iisexpress的VS2013运行). 预先感谢您的帮助!

Answer 1

IIS不知道如何处理(提供)这些文件(MIME).

将它添加到web.config文件中的system.webServer节点,你将是金色的:

<staticContent>    
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <!-- add more MIMEs if needed... -->
</staticContent>

- 编辑,请看下面的Ryans和我的评论:更好的是,为了安全起见,删除并添加mime类型maping:

<staticContent>    
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    <!-- add more MIMEs if needed... -->
</staticContent>

Answer 2

如果您捆绑脚本和CSS,则可能找不到像图像这样的资源.

在BundleConfig.cs文件中,使用CssRewriteUrlTransform创建包:

bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform()));

包含在_Layout.cshtml中:

@Styles.Render("~/Content/css/bootstrap")

一切都应该是好的.是的,查看网络上发生的事情以查看生成404的URL将有所帮助.

编辑:确保您使用的是Microsoft.AspNet.Web.Optimization v1.1.0.确认版本1.1.3也会导致此错误.

Answer 3

尝试禁用捆绑优化,会发生捆绑的css样式表的路径与引用的图像冲突.例如.您可能在包含"〜/ Content/css"的包中有一个css文件/Content/css/style.css =>,其中图像被指定为

    .someclass { background-image:url(img/someimg.png) }

这会将图像解析为/Content/css/img/someimg.png

现在部署发布版本,css文件现在呈现为捆绑URL,例如/ Content/css现在图像URL解析为/Content/img/someimg.png

您可以在App_Start\BundleConfig.cs中更改此行为

    System.Web.Optimization.BundleTable.EnableOptimizations = false;