Icônes d'amorçage non affichées dans l'application ASP.NET MVC publiée
--- NB: Allez à la section EDITED 2 pour le résumé ----
J'ai une application ASP.NT MVC (4). J'ai intégré (Twitter) Bootstrap à celui-ci . Bootstrap fonctionne parfaitement, mais les icônes ne s'affichent pas correctement lorsque je publie l'application.
J'ai essayé de republier l'application sans succès.
Pour clarifier, je mets quelques images ci-dessous.
Lorsque j'exécute mon application à partir de VS2013, le résultat est le suivant (ce qui est OK):
Sur le stand, IE et Chrome.
Mais lorsque je lance l'application publiée, le résultat est le suivant (ce qui n'est pas ok):
- Chrome
- IE (10)
Ce problème doit, d’une manière ou d’une autre, être lié au CSS évalué, mais je ne sais pas à quel moment cela pourrait se produire.
Les css évalués dans l'application locale sont les suivants (ce qui est correct):
- Chrome
- IE
Mais dans l'application publiée, j'ai ceci (ce qui n'est pas ok):
- Chrome:
- C'EST À DIRE:
Certains ont vécu ce comportement?
Que puis-je faire pour résoudre ce problème étrange?
--------------------------- RÉVISÉ ---------------------- --------
Je reçois les fichiers de police (.eot, .svg, .ttf et .woff) lors de la publication de mon application . Lorsque j'accède à la page par défaut (racine de l'application http://localhost/), à savoir la page affichant les icônes des fichiers affichés dans Chrome L'onglet Réseau des outils de développement est le suivant:
Avant d'inclure les fichiers, je recevais des erreurs 404 pour les fichiers. Je pouvais donc deviner qu'elles continuaient à être demandées même si elles n'étaient pas affichées dans l'onglet Réseau.
Cependant, les icônes ne sont pas affichées correctement.
------------------------ MODIFIÉ 2 ------------------------ ---
Eh bien, je redémarre mon site dans IIS 7. Et la demande commence à être déclenchée. Voici les demandes de fichiers affichées dans l'onglet Réseau des outils de développement de Chrome:
La requête recherche alors les fichiers dans:/Content/themes/fonts/mais ils se trouvent dans:/Content/themes/base/fonts/
Le dossier base contient un dossier bootstrap qui contient le fichier bootstrap.css. Dans le fichier CSS, cette classe fait référence aux fichiers de polices:
@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');
}
Il semble que les références aux fichiers de polices soient bonnes car l’arborescence des fichiers est la suivante:
Je pourrais changer la classe pour être:
@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');
}
Mais je saurais réellement ce qui se passe et comment le résoudre! En outre, les icônes seront affichées sur le site publié, mais pas sur le site local (à partir de VS2013 avec iisexpress) . Merci d'avance pour votre aide!
Si vous regroupez vos scripts et CSS, des actifs tels que des images risquent de ne pas être trouvés.
Dans votre fichier BundleConfig.cs, créez votre lot avec CssRewriteUrlTransform:
bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform()));
Inclure dans _Layout.cshtml:
@Styles.Render("~/Content/css/bootstrap")
Tout devrait être bon. Et oui, voir ce qui se passe sur le réseau pour voir quelle URL génère les 404 aidera.
EDIT: Assurez-vous d’utiliser Microsoft.AspNet.Web.Optimization v1.1.0. La version 1.1.3 confirmée provoque également cette erreur.
IIS ne sait pas comment gérer (servir) ces fichiers (MIME).
Ajoutez ceci à votre noeud system.webServer dans le fichier web.config et vous serez dorés:
<staticContent>
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
<!-- add more MIMEs if needed... -->
</staticContent>
--Edit, voir Ryans et le commentaire de la mienne ci-dessous:
<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>
Essayez de désactiver les optimisations d'ensemble, car le chemin d'accès à la feuille de style CSS fournie entre en conflit avec les images référencées. Par exemple. Vous pourriez avoir un fichier CSS /Content/css/style.css => dans un paquet "~/Content/css" Dans lequel une image est spécifiée comme telle
.someclass { background-image:url(img/someimg.png) }
Cela résoudrait l'image en /Content/css/img/someimg.png
Vous déployez maintenant la version validée et le fichier css est maintenant rendu dans une URL d'ensemble, telle que /Content/css L'URL d'image est maintenant résolue en /Content/img/someimg.png
Vous pouvez modifier ce comportement dans App_Start\BundleConfig.cs
System.Web.Optimization.BundleTable.EnableOptimizations = false;
Exécutez Fiddler ou utilisez l'onglet Réseau des outils de développement de votre navigateur. Ce que vous devez rechercher, c'est 404 résultats pour les demandes de téléchargement des fichiers de polices.
Assurez-vous également que le site publié contient des fichiers ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff].
Les différences que vous voyez dans les règles CSS calculées sont dues aux fichiers CSS minifiés (contrôlés par le paramètre debug=true/false du fichier web.config). La valeur \e013 est simplement une autre façon d’écrire le symbole que vous voyez.
Note aux lecteurs: Lisez bien le commentaire de @ user2261073 et la réponse de @ Jeff concernant un bogue dans le personnaliseur. C'est probablement la cause de votre problème.
Le fichier de police n'est pas chargé correctement. Vérifiez si les fichiers sont à leur emplacement prévu.
@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');
}
Il pourrait également s'agir d'un problème de type MIME. Les outils de développement de Chrome affichent les polices téléchargées dans l'onglet Réseau:
Le personnaliseur d'amorçage semble envoyer des polices de tailles différentes de celles contenues dans l'ensemble du package d'amorçage fourni avec les exemples. Si vous utilisez un amorçage personnalisé, essayez de remplacer les fichiers de polices.
Mettre à jour
Vous obtenez un code d'état 304 qui représente "les fichiers statiques non modifiés téléchargés ou stockés dans le cache du client". Donc, il est lié au cache client et nécessite un aperçu des iis.
L'inclusion de la ligne ci-dessous dans le fichier RegisterBundles () du fichier BundleConfig.cs a fonctionné pour moi.
System.Web.Optimization.BundleTable.EnableOptimizations = false;
- Assurez-vous que l’extension .woff est ajoutée correctement à IIS MIME Types de votre site Web afin d’éliminer les erreurs 404 possibles.
Résolvez les problèmes de mise en cache en supprimant les lignes web.config suivantes, car Internet Explorer ne semble pas l’aimer:
<add name="Cache-Control" value="no-cache, no-store" /> <add name="Pragma" value="no-cache" />
La solution d'igorludi devrait bien fonctionner.
Et je pense que nous pouvons dire à IIS de gérer ce "nouveau" MIME TYPE en:
Sélectionnez le site.
Accédez à IIS >> Types MIME.
Ajoute ces nouvelles extensions et types (voir la réponse XML sur igorludi).
Redémarrez le site.
J'avais aussi ce problème avec MVC 5 et Bootstrap v3.3.6.
Échec du chargement de la ressource: le serveur a répondu avec un statut de 404 (Pas trouvé) http: // NameOfSite/Error/NotFound? aspxerrorpath =/bundles/fonts/glyphicons-halflings-regular.woff2
Vous devez mettre à jour le @icon-font-path dans le fichierContent/bootstrap/variables.less de "../fonts/"; à "/Content/fonts/";
essayez <link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> et essayez @Styles.Render("~/bootstrap/css") La seule différence que j'ai trouvée
J'ai eu ce problème également. Plutôt que de devoir déplacer des fichiers, vous pouvez créer un répertoire virtuel à la racine du projet dans IIS.
Vous devez définir la propriété Copier dans le répertoire de sortie des fichiers surCopier toujours
add: BundleTable.EnableOptimizations = False corrige mon problème.
Public Sub RegisterBundles(ByVal bundles As BundleCollection)
BundleTable.EnableOptimizations = False
bundles.Add(New StyleBundle("~/DefaultStyles").Include(
"~/Content/custom3.css"))
End Sub
Avez-vous inclus vos fichiers d'amorçage dans le projet? Seuls les fichiers inclus dans la solution doivent être publiés.
J'ai eu le même problème. Si vous ne pouvez toujours pas le résoudre, le problème réside dans la référence aux archives des icônes.
Pour votre cas, la référence devrait être: "../ Contenu/themes/base/polices/glyphicons-halflings-regular ..."
Enfin, désolé pour mon anglais si vous ne comprenez pas parce que je parle espagnol et que je ne fais que pratiquer la langue anglaise. :RÉ
Quiconque cherche toujours une autre réponse, cette méthode est suggérée sur une autre réponse StackOverflow résout le problème.
Modifiez l'action de génération sur les fichiers .eot, .ttf, & .woff en "Contenu" au lieu de la valeur par défaut de "Aucune". Faire cela a résolu mon problème.