web-dev-qa-db-ja.com

Bootstrap公開されたASP.NET MVCアプリケーションにアイコンが表示されない

---注：要約については、編集2セクションを参照してください----

ASP.NT MVC（4）アプリケーションがあります。 （Twitter）Bootstrapを統合しました。 Bootstrapは完全に機能していますが、アプリケーションを公開するときにアイコンが正しく表示されません。

成功せずにアプリケーションを再公開しようとしました。

明確にするために、以下にいくつかの画像を掲載します。

VS2013からアプリケーションを実行すると、結果は次のようになります（これで問題ありません）。

Local Icons

ブースでは、IEおよびChrome。

しかし、公開されたアプリケーションを実行すると、結果は次のようになります（大丈夫ではありません）：

  • Chrome

Published Chrome

  • IE（10）

Published IE

この問題は、どういうわけか、評価されたCSSに関係していますが、どの時点でこれが発生する可能性があるのか​​わかりません。

ローカルアプリケーションで評価されるcssは次のとおりです（これで問題ありません）。

  • Chrome

Local CSS Chrome

  • IE

Local CSS IE

しかし、公開されたアプリケーションにはこれがあります（これは大丈夫ではありません）：

  • クロム：

Published CSS Chrome

  • IE：

Publisehd CSS IE

一部はこの動作を経験していますか？

この奇妙な問題を解決するにはどうすればよいですか？

---------------------------編集---------------------- --------

アプリケーションを公開するときにフォントファイル（.eot、.svg、.ttf、および.woff）を含めるようにします。デフォルトページ（アプリケーションルートhttp://localhost/）にアクセスすると、アイコンが表示されているページになります。このページには、Chromeの[開発ツール]ネットワークタブに表示されるファイルがあります。

Network Tab

ファイルを含める前に、ファイルの404エラーが発生していました。そのため、[ネットワーク]タブに表示されていなくても、それらは引き続きリクエストされます。

ただし、アイコンは正しく表示されません。

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

さて、私はIIS 7。

New Requested files

次に、次のファイルを探します：/Content/themes/fonts/しかし、それらは：/Content/themes/base/fonts/

baseフォルダーには、bootstrap.cssファイルを含むbootstrapフォルダーが含まれます。 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');
}

ファイルツリーがこれであるので、フォントファイルへの参照は良いようです：

files tree

クラスを次のように変更できます。

@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で実行）。 ご協力ありがとうございます！

cssasp.net-mvcasp.net-mvc-4twitter-bootstrapless
29
sabotero

スクリプトと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")

すべてが良いはずです。そして、はい、ネットワーク上で何が起こっているのかを表示して、どのURLが404を生成しているかを確認すると役立ちます。

編集：Microsoft.AspNet.Web.Optimization v1.1.0を使用していることを確認してください。バージョン1.1.3を確認すると、このエラーも発生します。

18
Jeremy Ray Brown

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>

-編集、以下のライアンズと私のコメントを参照してください：さらに良いことには、安全のために、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>
18
igorludi

バンドルの最適化を無効にしてみてください。バンドルされたCSSスタイルシートへのパスが参照画像と競合します。例えば。画像がそのように指定されているバンドル「〜/ Content/css」にCSSファイル/Content/css/style.css =>があるかもしれません

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

これにより、画像は/Content/css/img/someimg.pngに解決されます。

リリースビルドを展開し、cssファイルが/ Content/cssなどのバンドルURLにレンダリングされるようになりました。イメージURLは/Content/img/someimg.pngに解決されます。

この動作はApp_Start\BundleConfig.csで変更できます

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

Fiddlerを実行するか、ブラウザーの開発者ツールのネットワークタブを使用します。探す必要があるのは、フォントファイルをダウンロードするリクエストの404結果です。

また、公開サイトに~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff]ファイルが含まれていることを確認してください。

計算されたCSSルールに見られる違いは、縮小されたCSSファイル（web.configファイルのdebug=true/false設定によって制御される）によるものです。値\e013は、表示されているシンボルを記述する別の方法です。

2
Knaģis

読者への注意：カスタマイザーのバグに関する @ user2261073のコメント および @ Jeffの回答 を必ずお読みください。それが問題の原因である可能性があります。

フォントファイルが正しく読み込まれていません。ファイルが予想される場所にあるかどうかを確認します。

@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の開発ツールでは、ダウンロードされたフォントが[ネットワーク]タブに表示されます。

chrome network tab font download

bootstrap=カスタマイザは、サンプルに付属するbootstrapパッケージに含まれるフォントとは異なるサイズのフォントを送信しているようです。カスタマイズされたブートストラップを使用する場合、フォントファイルを置き換えてみてください。

更新

「ダウンロードした、またはクライアントキャッシュにある変更されていない静的ファイル」を表すステータスコード304を受け取ります。そのため、クライアントキャッシュに関連し、IISを少し覗く必要があります。

これは問題の解決に役立ちます

2
Sakthivel

BundleConfig.csファイルのRegisterBundles（）に以下の行を含めると、うまくいきました。

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

2
Divyans Mahansaria
  1. 404エラーを取り除くために、.woff拡張子がWebサイトのMIMEタイプIISに正しく追加されていることを確認してください

  2. Internet Explorerは気に入らないようであるため、次のweb.config行を削除して、キャッシュの問題を修正します。

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

Igorludiのソリューションは正常に機能するはずです。

そして、私はIISにこれらの「新しい」MIMEタイプを処理するように伝えることができると思う：

  • サイトを選択します。

  • IIS >> MIMEタイプ;

  • それらの新しい拡張子とタイプを追加します（igorludiの回答のXMLを参照）。

  • サイトを再起動します。

1
S_R

MVC 5とBootstrap v3.3.6。でもこの問題が発生していました。

リソースのロードに失敗しました：サーバーは404（Not Found）のステータスで応答しました http：// NameOfSite/Error/NotFound？aspxerrorpath =/bundles/fonts/glyphicons-halflings-regular.woff2

@icon-font-pathファイルのContent/bootstrap/variables.lessを"../fonts/";から"/Content/fonts/";に更新する必要があります

1
Mason240

_<link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" />_を試して@Styles.Render("~/bootstrap/css")を試してください

0
wit_w_peter

この問題もありました。私が使用した解決策はこの質問内にあります： https://stackoverflow.com/questions/27254055/manually-added-directory-not-automatically-included-with-one-click-file-system-d

  • プロジェクトをアンロードします
  • csprojファイルを編集します
  • 関連するフォントファイルのコンテンツインクルードに[なし]を変更します。

もう一度ワンクリックでデプロイすると、ファイルが公開されます。

0
trees_are_great

私もこの問題を抱えていました。ファイルを移動する代わりに、IISのプロジェクトのルートに仮想ディレクトリを作成できます。

0
Adam

プロパティを設定する必要があります出力ディレクトリにコピー上のファイル常にコピー

0
Evis

追加：BundleTable.EnableOptimizations = False問題を修正しました。

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

bootstrap=ファイルをプロジェクトに含めましたか？ソリューションに含まれるファイルのみが公開されます。

0
Andrei

同じ問題がありました。それでも解決できない場合、問題はアイコンのアーカイブへの参照にあります。

あなたの場合、参照は「../ Content/themes/base/fonts/glyphicons-halflings-regular ...」です。

最後に、スペイン語を話し、英語を練習しているだけなので、理解できない場合は英語で申し訳ありません。 ：D

0
jerobux

まだ別の答えを探している人は誰でも、このメソッドが別の答えを提案しました StackOverflow answer は問題を解決します。

.eot、.ttf、および.woffファイルのビルドアクションを、デフォルト値の「なし」ではなく「コンテンツ」に変更します。これにより問題が解決しました。

0
Umair