it-swarm.com.de

Bootstrap-Symbole werden in veröffentlichten ASP.NET-MVC-Anwendungen nicht angezeigt

--- NB: Gehe zum Abschnitt EDITED 2 für Zusammenfassung ----

Ich habe eine ASP.NT-MVC (4) -Anwendung. Ich habe (Twitter) Bootstrap integriert . Bootstrap funktioniert einwandfrei, aber die Icons werden beim Veröffentlichen der Anwendung nicht richtig angezeigt.

Ich habe versucht, die Anwendung ohne Erfolg erneut zu veröffentlichen.

Zur Veranschaulichung habe ich hier einige Bilder eingefügt.

Wenn ich meine Anwendung von VS2013 aus laufe, lautet das Ergebnis (was in Ordnung ist):

Local Icons

In Stand, IE und Chrome.

Aber wenn ich die veröffentlichte Anwendung starte, ist das Ergebnis (was NICHT in Ordnung ist):

  • Chrom

Published Chrome

  • IE (10)

Published IE

Dieses Problem hat irgendwie mit dem bewerteten CSS zu tun, aber ich weiß nicht, an welchem ​​Punkt dies geschehen könnte.

Die ausgewerteten CSS in der lokalen Anwendung lauten (was OK ist):

  • Chrom

Local CSS Chrome

  • IE

Local CSS IE

Aber in der veröffentlichten Anwendung habe ich Folgendes (was NICHT in Ordnung ist):

  • Chrom:

Published CSS Chrome

  • IE:

Publisehd CSS IE

Einige haben dieses Verhalten erlebt?

Was kann ich tun, um dieses seltsame Problem zu lösen?

--------------------------- BEARBEITET ---------------------- --------

Ich erhalte die Schriftartendateien (.eot, .svg, .ttf und .woff), die beim Veröffentlichen meiner Anwendung enthalten sind. Wenn ich auf die Standardseite (Anwendungsstamm http://localhost/) zugreifen, werden die Symbole angezeigt, die in den Chrome-Dateien angezeigt werden Die Registerkarte Netzwerk für Entwickler-Tools ist:

Network Tab

Vor dem Einfügen der Dateien erhielt ich 404-Fehler für die Dateien, sodass ich vermute, dass sie weiterhin angefordert werden, auch wenn sie nicht im Netzwerkregister angezeigt werden.

Die Symbole werden jedoch nicht korrekt angezeigt.

------------------------ BEARBEITET 2 ------------------------ ---

Nun, ich starte meine Site im IIS 7 neu. Die Anfrage wird ausgelöst. Dies sind die Dateianforderungen, die auf der Registerkarte "Netzwerk" des Chrome "Developper Tools" angezeigt werden:

New Requested files

Die Anfrage sucht dann nach den Dateien in:/Content/themes/fonts/aber sie befinden sich in:/Content/themes/base/fonts/

Der base-Ordner enthält einen bootstrap-Ordner, der die bootstrap.css-Datei enthält. In der CSS-Datei gibt es diese Klasse, die auf die Schriftdateien verweist:

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

Es scheint, dass die Verweise auf die Schriftdateien gut sind, da der Dateibaum folgendermaßen aussieht:

files tree

Ich könnte die Klasse folgendermaßen ändern: 

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

Aber ich würde tatsächlich wissen, was das ist und wie man es lösen kann! .__ Außerdem werden die Icons auf der veröffentlichten Site angezeigt, aber nicht auf der lokalen Site (läuft ab VS2013 mit iisexpress) . Vielen Dank Sie im Voraus für Ihre Hilfe!

26
sabotero

Wenn Sie Ihre Skripts und CSS bündeln, werden möglicherweise Assets wie Bilder nicht gefunden.

Erstellen Sie in Ihrer BundleConfig.cs-Datei Ihr Bundle mit CssRewriteUrlTransform:

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

In _Layout.cshtml einschließen:

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

Alles sollte gut sein. Und ja, wenn Sie sehen, was über das Netzwerk passiert, können Sie sehen, welche URL die 404s generiert.

BEARBEITEN: Stellen Sie sicher, dass Sie Microsoft.AspNet.Web.Optimization v1.1.0 verwenden. Die bestätigte Version 1.1.3 führt ebenfalls zu diesem Fehler.

17

IIS kann nicht mit diesen Dateien (MIMEs) umgehen.

Fügen Sie dies zu Ihrem system.webServer-Knoten in der Datei web.config hinzu, und Sie werden begeistert sein:

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

- Editiert, siehe Ryans und meinen Kommentar unten: Um noch sicherer zu sein, entferne und füge den Mime-Typ hinzu:

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

Deaktivieren Sie die Bundle-Optimierungen. Der Pfad zum gebündelten CSS-Stylesheet ist mit den referenzierten Bildern in Konflikt. Zum Beispiel. Sie haben möglicherweise eine CSS-Datei /Content/css/style.css => in einem Bundle "~/Content/css" , In der ein Bild als solches angegeben wird

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

Dies würde das Bild in /Content/css/img/someimg.png auflösen

Jetzt stellen Sie das Release-Build bereit, und die CSS-Datei wird jetzt in einer Bündel-URL wie ____./ Content/css.__ gerendert. Jetzt wird die Bild-URL in /Content/img/someimg.png aufgelöst

Sie können dieses Verhalten in App_Start\BundleConfig.cs ändern

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

Führen Sie Fiddler aus oder verwenden Sie die Registerkarte "Netzwerk" in den Entwicklerwerkzeugen Ihres Browsers. Nach was Sie suchen sollten, sind 404 Ergebnisse für die Anforderungen, die die Schriftdateien herunterladen.

Stellen Sie außerdem sicher, dass die veröffentlichte Site ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff]-Dateien enthält.

Die Unterschiede, die Sie in den berechneten CSS-Regeln sehen, sind auf minimierte CSS-Dateien zurückzuführen (gesteuert durch die Einstellung debug=true/false in der Datei web.config). Der Wert \e013 ist nur eine weitere Möglichkeit, das Symbol, das Sie sehen, zu schreiben.

2
Knaģis

Hinweis für die Leser: Lesen Sie @ user2261073s Kommentar und @ Jeffs Antwort bezüglich eines Fehlers im Customizer. Es ist wahrscheinlich die Ursache Ihres Problems.


Die Schriftdatei wird nicht korrekt geladen. Überprüfen Sie, ob sich die Dateien am erwarteten Speicherort befinden.

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

Es kann auch ein Mimetyp-Problem sein. Die Entwicklertools von Chrome zeigen heruntergeladene Schriftarten auf der Registerkarte "Netzwerk" an:

chrome network tab font download

Der Bootstrap-Anpasser sendet scheinbar Schriftarten mit einer anderen Größe als die des gesamten Bootstrap-Pakets, das in den Beispielen enthalten ist. Wenn Sie einen benutzerdefinierten Bootstrap verwenden, ersetzen Sie die Schriftartdateien.

Update 

Sie erhalten einen Statuscode 304, der "nicht modifizierte statische Dateien, die heruntergeladen wurden oder sich im Client-Cache befinden" darstellt. Es ist also auf den Client-Cache bezogen und erfordert etwas Einblick in iis.

Dies ist hilfreich bei der Lösung Ihres Problems

2
Sakthivel

Die Aufnahme der folgenden Zeile in RegisterBundles () der BundleConfig.cs-Datei hat für mich funktioniert. 

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

2
  1. Stellen Sie sicher, dass die .woff-Erweiterung korrekt zu IIS MIME-Typen Ihrer Website hinzugefügt wurde, um mögliche 404-Fehler zu beseitigen
  2. Beheben Sie Probleme beim Zwischenspeichern, indem Sie die folgenden web.config-Zeilen entfernen, da Internet Explorer dies nicht zu mögen scheint:

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

Die Lösung von igorludi sollte gut funktionieren.

Und ich denke, wir können dem IIS sagen, dass er diese "neuen" MIME-TYPE behandeln soll:

  • Wählen Sie die Site aus.

  • Gehen Sie zu IIS >> MIME-Typen.

  • Fügt diese neue Erweiterung und den neuen Typ hinzu (siehe die XML-Antwort zu igorludi).

  • Starten Sie die Site neu.

1
S_R

Ich hatte auch dieses Problem mit MVC 5 und Bootstrap v3.3.6.

Ressource konnte nicht geladen werden: Der Server antwortete mit dem Status 404 (Nicht gefunden) http: // NameOfSite/Fehler/Nicht gefunden? aspxerrorpath =/bundles/fonts/glyphicons-halflings-regular.woff2

Sie müssen den @icon-font-path in der Content/bootstrap/variables.less-Datei von "../fonts/"; auf "/Content/fonts/"; aktualisieren.

1
Mason240

try <link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> und try @Styles.Render("~/bootstrap/css") Der einzige Unterschied, den ich gefunden habe

0
wit_w_peter

Ich hatte auch dieses Problem. Die Lösung, die ich verwendet habe, ist in dieser Frage enthalten: https://stackoverflow.com/questions/27254055/manual-added-directory-nicht- automatisch-includiert-mit-einemclick-file-system-d

  • entladen Sie das Projekt
  • bearbeiten Sie die Csproj-Datei
  • Ändern Sie Kein Include in Content Include für die relevanten Font-Dateien. 

Verwenden Sie erneut die Bereitstellung mit einem Klick, und die Dateien werden veröffentlicht.

0
Sam

Ich hatte auch dieses Problem. Anstatt Dateien verschieben zu müssen, können Sie ein virtuelles Verzeichnis im Stammverzeichnis des Projekts in IIS erstellen.

0
Adam

Sie müssen die Eigenschaft Copy to Output Directory der Dateien aufCopy immersetzen.

0
Evis

hinzufügen: BundleTable.EnableOptimizations = False mein Problem wurde behoben.

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

Haben Sie Ihre Bootstrap-Dateien in das Projekt eingefügt? Nur die in der Lösung enthaltenen Dateien sollen veröffentlicht werden.

0
Andrei

Ich hatte das gleiche Problem. Wenn Sie es immer noch nicht lösen können, liegt das Problem im Verweis auf die Archive der Symbole.

Für Ihren Fall sollte die Referenz lauten: "../ Content/themes/base/fonts/glyphicons-halflings-regular ..."

Entschuldigung für mein Englisch, wenn Sie es nicht verstehen, weil ich Spanisch spreche und nur die englische Sprache übe. : D

0
jerobux

Wer noch nach einer alternativen Antwort sucht, schlägt diese Methode in einer anderen StackOverflow-Antwort vor behebt das Problem. 

Ändern Sie die Build-Aktion für die .eot-, .ttf- und .woff-Dateien in "Content" anstelle des Standardwerts "None". Dadurch wurde mein Problem gelöst.

0
Umair