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

Posted 2023-03-04

【中文标题】已发布的 ASP.NET MVC 应用程序中未显示引导图标

【英文标题】：Bootstrap Icons not showing in published ASP.NET MVC application

【发布时间】：2014-01-01 00:21:53

【问题描述】：

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

我有一个 ASP.NT MVC (4) 应用程序。我将 (twitter)Bootstrap 集成到它。 Bootstrap 运行良好，但在我发布应用程序时图标显示不正确。

我尝试重新发布应用程序但没有成功。

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

当我从 VS2013 运行我的应用程序时，结果是这样的（没关系）：

在展位，IE 和 Chrome。

但是当我运行已发布的应用程序时，结果是这样的（这是不行的）：

铬

IE (10)

不知何故，这个问题与评估的 CSS 相关，但我不知道这会在什么时候发生。

本地应用程序中评估的 css 是这样的（没关系）：

铬

IE

但在已发布的应用程序中，我有这个（这是不行的）：

铬：

IE：

有些人经历过这种行为？

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

--------------- 已编辑 ------------------- ------------

在发布我的应用程序时，我得到了要包含的字体文件（.eot、.svg、.ttf 和 .woff）。 当我访问默认页面（应用程序根 http://localhost/）时，该页面显示了 Chrome 的开发者工具网络选项卡中显示的文件的图标：

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

不过，图标显示不正确。

------------ 已编辑 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');
    

但是，我实际上会知道发生了什么以及如何解决它！ 此外，图标将显示在已发布的站点中，但不会显示在本地站点中（从 VS2013 和 iisexpress 运行）。 提前感谢您的帮助！

【问题讨论】：

我正在为更具体的问题创建另一个答案，即为什么在发布应用程序时没有复制文件

新问题：***.com/q/20563752/2776550

IIS 7. 我重新启动站点，然后显示请求：问题是请求查找文件/Content/themes/fonts/glyphicons-halflings-regular.*，但文件位于：/Content/themes/base/fonts/glyphicons-halflings-regular.*

实际上这解决了我的问题***.com/questions/12458444/…

【参考方案1】：

如果您将脚本和 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 也会导致此错误。

【讨论】：

你成功了！ CssRewriteUrlTransform 完成了这项工作！

在将 System.Optimization 更新到 1.1.3 版本后，它又坏了:(

您好，我安装了以下软件包：Microsoft.AspNet.Web.Optimization，版本 1.1.3。这对我有用。也许检查一下更新期间是否有其他任何更改。

好像是1.1.3版本的bug，我要回滚到1.1.0了，谢谢！

@sabotero，我刚刚遇到了其他可能导致您的问题的问题。相对捆绑 url 需要与您的 css 文件 (***.com/questions/30434867/…) 的 url 相同。因此，如果您有 /Content/MyJSLib 之类的东西，并且它有 /css、/images 等，那么捆绑路径必须是“~/Content/MyJSLib/css”。我发现在这种情况下不需要 CssRewriteUrlTransform，即使图像与 CSS 文件位于不同的文件夹中。

【参考方案2】：

任何仍在寻找替代答案的人，在另一个 *** answer 上建议的这种方法可以解决问题。

将 .eot、.ttf 和 .woff 文件的构建操作更改为“内容”，而不是默认值“无”。这样做解决了我的问题。

【参考方案3】：

确保将 .woff 扩展名正确添加到您网站的 IIS MIME 类型中，以消除可能的 404 错误

通过删除以下 web.config 行来修复缓存问题，因为 Internet Explorer 似乎不喜欢它：

<add name="Cache-Control" value="no-cache, no-store" />
<add name="Pragma" value="no-cache" />

【讨论】：

这里的问题不是那个，而是The resquest is then looking for the files in: /Content/themes/fonts/ but they are in: /Content/themes/base/fonts/ ...

@sabotero，感谢您的澄清，很抱歉这不能解决您的确切问题。然而，我是一个非常相似的场景的受害者，这两个步骤帮助我解决了这个问题。而且由于您的帖子在我寻找解决方案时首先出现，我想也许这是分享它的正确地方。

顺便说一下，我检查了我的项目。我也安装了 Bootstrap，但在“内容”和“基本”文件夹中都没有“字体”文件夹之类的东西。您尝试卸载引导程序然后从 NuGet 重新安装它怎么样？！

字体文件夹在哪里？

Fonts 文件夹是与 Content 同级的主文件夹。

【参考方案4】：

添加：BundleTable.EnableOptimizations = False 解决了我的问题。

Public Sub RegisterBundles(ByVal bundles As BundleCollection)
    BundleTable.EnableOptimizations = False
    bundles.Add(New StyleBundle("~/DefaultStyles").Include(
      "~/Content/custom3.css"))
End Sub

【参考方案5】：

我在使用 MVC 5 和 Bootstrap v3.3.6 时也遇到了这个问题。

加载资源失败：服务器响应状态为 404 （未找到） http://NameOfSite/Error/NotFound?aspxerrorpath=/bundles/fonts/glyphicons-halflings-regular.woff2

您需要将Content/bootstrap/variables.less文件中的@icon-font-path从"../fonts/";更新为"/Content/fonts/";

【参考方案6】：

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 类型映射：

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

【讨论】：

这似乎破坏了所有内置的默认 MIME 类型，或者什么。每当我将它添加到我的 web.config 文件时，都不会提供任何其他静态内容 - 没有 CSS、图像、其他字体等。

如果您将静态文件托管在其他应用程序上，请不要犯我的错误并注意您正在更改的确切网络应用程序

这很有趣，我在 html 上声明了引导 css 和 js，字体到位，哑剧还可以，我还得到了巨魔小方块，我还能缺少什么？编辑：NVM，我缺少 glyphicon 类。试图在没有 glyphicon 基类的情况下使用 glyphicon。

Ryan，似乎 IIS（不确定是否所有版本）在覆盖 mime 类型时会出现问题，就像我解释的那样，更安全的方法是删除显式处理程序并重新添加它，请参阅：@987654321 @我会更新我的答案。

【参考方案7】：

在 BundleConfig.cs 文件的 RegisterBundles() 中包含以下行对我有用。

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

【参考方案8】：

您必须在始终复制

上设置文件的属性复制到输出目录

【讨论】：

你指的是网络表单吗？

【参考方案9】：

我也有这个问题。我使用的解决方案在这个问题内： https://***.com/questions/27254055/manually-added-directory-not-automatically-included-with-one-click-file-system-d

卸载项目 编辑 csproj 文件 将相关字体文件的“无包含”更改为“内容包含”。

再次使用一键部署，文件就发布了。

【参考方案10】：

igorludi 的解决方案应该可以正常工作。

我认为，我们可以通过以下方式告诉 IIS 处理那些“新”MIME TYPE：

选择站点；

转到 IIS >> MIME 类型；

添加这些新的扩展名和类型（请参阅 igorludi 上的 XML 答案）。

重启网站。

【参考方案11】：

我也有这个问题。您可以在 IIS 的项目根目录中创建一个虚拟目录，而不必到处移动文件。

【参考方案12】：

我遇到了同样的问题。如果还是不能解决，问题出在图标档案的参考上。

对于您的情况，参考应该是：“../Content/themes/base/fonts/glyphicons-halflings-regular...”

最后，如果你听不懂我的英语对不起，因为我说西班牙语，我只是在练习英语。 :D

【参考方案13】：

试试<link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> 和 试试@Styles.Render("~/bootstrap/css") 我发现的唯一区别

【参考方案14】：

读者注意：请务必阅读@user2261073's comment 和@Jeff's answer，了解定制器中的错误。这可能是您的问题的原因。

---

字体文件未正确加载。检查文件是否在预期位置。

@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');

这也可能是一个 mimetype 问题。 Chrome 的开发工具在网络标签中显示下载的字体：

引导定制器似乎发送的字体与示例随附的整个引导包中的字体大小不同。如果您使用自定义引导程序，请尝试替换字体文件..

更新

您会得到一个状态代码 304，它表示“未修改下载或在客户端缓存中的静态文件”。所以它与客户端缓存有关，需要对 iis 进行一些了解。

This will be helpful in solving your issue

【讨论】：

当我发布我的应用程序时，这些文件没有被复制，唯一被复制的文件是.svg 文件。 .eot、.ttf 和 woff 文件丢失！

糟糕，发生在 13 号星期五。 :P

好的，我设法包含了文件，所以我想我又回到了这个问题，因为即使包含了文件，图标也没有正确显示。尽管我在这里没有看到您的相同要求。似乎我的应用程序不请求字体文件。奇怪的是，他们在包含文件之前就被请求了，因为我对这些文件有 404 错误。我编辑了我的问题以包含此内容。

另外，我没有自定义bootstrap，我用的是full.zip版本

检查我的状态码更新答案和 iis 潜行。如果确实解决了您的问题，请不要忘记接受此答案，因此其他人将受益于此。

【参考方案15】：

您是否将引导文件包含在项目中？只有包含在解决方案中的文件才会被发布。

【讨论】：

是的，它们已包含在项目中，但尚未发布

@sabotero 图片是否包含在内？

在img 文件夹中？是的，我在发布时包含两个文件（黑色图标和白色图标）。

我正在为更具体的问题创建另一个答案，即为什么在发布应用程序时没有复制文件。

【参考方案16】：

尝试禁用捆绑优化，会发生捆绑的 css 样式表的路径与引用的图像冲突。 例如。你可能有一个css文件 /Content/css/style.css => 在包“~/Content/css”中 其中一个图像是这样指定的

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

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

现在您部署发布版本，并且 css 文件现在呈现到捆绑 URL，例如 /内容/css 现在图像 URL 解析为 /Content/img/someimg.png

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

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

【讨论】：

感谢它对我有用。但我更喜欢 igorludi 解决方案，但我的网络服务器不接受网络配置中的该部分！！！

我将此答案标记为有用，因为禁用捆绑优化有效（我正在运行 MVC5 Web 应用程序）。但是，我的问题是我的Application_Start() 函数中有BundleTable.EnableOptimizations = true;。只需删除该行即可解决问题。

【参考方案17】：

运行 Fiddler 或使用浏览器开发者工具上的网络标签。您应该寻找下载字体文件的请求的 404 结果。

还要确保发布的站点包含~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff] 文件。

您在计算的 CSS 规则中看到的差异是由于缩小的 CSS 文件（由 web.config 文件中的debug=true/false 设置控制）。 \e013 值只是另一种书写您所看到的符号的方式。

【讨论】：

嗯，对于你提到的这三个文件，我在 chrome 的网络选项卡中有三个 404 错误。我会看看如何在出版物中包含这些文件。谢谢！

我不明白你的最后一段在更改调试设置时计算的 CSS 有什么变化。顺便说一句，我的调试设置是debug=false

好吧，我想我自己回答，我将设置更改为debug=true 并理解您的意思！

我得到了应用程序发布时要包含的文件，但图标仍然像我之前提到的那样显示！