Подтвердить что ты не робот

Значки Bootstrap не отображаются в опубликованном приложении ASP.NET MVC

--- NB: перейдите к разделу EDITED 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

Но в опубликованном приложении у меня есть это (что НЕ нормально):

  • Chrome:

Published CSS Chrome

  • IE:

Publisehd CSS IE

Кто-то испытал это поведение?

Что я могу сделать для решения этой странной проблемы?

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

Я получаю файлы шрифтов (.eot, .svg, .ttf и .woff) для включения при публикации моего приложения. Когда я получаю доступ к странице по умолчанию (корневой каталог приложения http://localhost/), который является страницей, на которой отображаются значки, файлы, отображаемые на вкладке "Инструменты разработчика Chrome":

Network Tab

Прежде чем включать файлы, я получал 404 ошибки для файлов, поэтому я мог догадаться, что они продолжают запрашиваться, даже если они не отображаются на вкладке "Сеть".

Хотя, значки отображаются неправильно.

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

Хорошо, я перезапускаю свой сайт в IIS 7. И запуск запроса запускается. Это запросы файлов, показанные на вкладке "Сеть разработчиков Chrome":

New Requested files

Затем 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');
}

Кажется, что ссылки на файлы шрифтов хороши, так как это дерево файлов:

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). Заранее благодарю вас за помощь!

4b9b3361

Ответ 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")

Все должно быть хорошо. И да, просмотр того, что происходит по сети, чтобы увидеть, какой URL-адрес генерирует 404s, поможет.

Ответ 2

IIS не знает, как обрабатывать (обслуживать) эти файлы (MIME).

Добавьте это в свой файл system.webServer node в файле web.config, и вы станете золотым:

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

Ответ 3

Попробуйте отключить оптимизацию пакетов, что происходит, так это то, что путь к связанной таблице CSS css конфликтует с изображениями, на которые делается ссылка. Например. У вас может быть файл css /Content/css/style.css = > в комплекте "~/Content/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;

Ответ 4

Запустить Fiddler или использовать вкладку сети в инструментах разработчика браузера. Вы должны искать 404 результатов для запросов, загружающих файлы шрифтов.

Также убедитесь, что опубликованный сайт содержит файлы ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff].

Различия, которые вы видите в вычисленных правилах CSS, из-за миниатюрных CSS файлов (контролируемых параметром debug=true/false в файле web.config). Значение \e013 - это еще один способ записи символа, который вы видите.

Ответ 5

Примечание для читателей: обязательно прочитайте @user2261073 комментарий и @Jeff 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 dev отображают загруженные шрифты на вкладке сети:

chrome network tab font download

Настройщик бутстрапа, кажется, отправляет шрифты разного размера, чем те, которые находятся внутри всего пакета начальной загрузки, который поставляется с примерами. Если вы используете настраиваемый бутстрап, попробуйте заменить файлы шрифтов..

Обновить

Вы получаете код состояния 304, который представляет "не измененные статические файлы, загруженные или в кеш клиента". Таким образом, он связан с кешем клиента и требует некоторого подглядывания в iis.

Это поможет вам решить вашу проблему

Ответ 6

Решение от igorludi должно работать нормально.

И я думаю, мы можем сказать, что IIS обрабатывает этот "новый" ТИП MIME:

  • Выберите сайт;

  • Перейдите в IIS → MIME Types;

  • Добавляет новое расширение и тип (см. XML на ответ igorludi).

  • Перезагрузите сайт.

Ответ 7

Включение этой строки в файл RegisterBundles() в файле BundleConfig.cs для меня.

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

Ответ 8

  • Убедитесь, что расширение .woff добавлено правильно в IIS MIME Типы вашего сайта, чтобы избавиться от возможных ошибок 404.
  • Исправить проблемы кэширования, удалив следующие строки web.config, потому что Internet Explorer, похоже, не нравится:

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

Ответ 10

Включили ли вы свои загрузочные файлы в проект? Публикуются только файлы, включенные в решение.

Ответ 11

попробуйте <link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> и попробуйте @Styles.Render("~/bootstrap/css") Единственное отличие, которое я нашел

Ответ 12

У меня была та же проблема. Если вы все еще не можете его решить, проблема связана с архивами значков.

В вашем случае ссылка должна быть: "../Content/themes/base/fonts/glyphicons-halflings-regular..."

Наконец, Извините за мой английский, если вы не понимаете, потому что я говорю по-испански, и я просто занимаюсь английским языком.: D

Ответ 13

У меня тоже была эта проблема. Вместо того, чтобы перемещать файлы вокруг, вы можете создать виртуальный каталог в корне проекта в IIS.

Ответ 14

У меня тоже была эта проблема. Решение, которое я использовал, находится в пределах этого вопроса: https://stackoverflow.com/questions/27254055/manually-added-directory-not-automatically-included-with-one-click-file-system-d

  • выгрузить проект
  • отредактируйте файл csproj
  • Изменить Ничего не включить в Content Include для соответствующих файлов шрифтов.

Повторно используйте однократное развертывание и публикации файлов.

Ответ 15

Вы должны установить свойство Copy в Output Directory для файлов в Копировать всегда

Ответ 16

добавление: BundleTable.EnableOptimizations = False исправил мою проблему.

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

Ответ 17

Любой, кто все еще ищет альтернативный ответ, этот метод предлагает другой fooobar.com/info/136426/..., устраняет проблему.

Измените действие Build в файлах .eot,.ttf и .woff на "Содержимое" вместо значения по умолчанию "Нет". Это разрешило мою проблему.