Связанные URL-адреса MVC и CSS

Связывание MVC возвращает неправильный URL-адрес в изображениях CSS при использовании CssRewriteUrlTransform:

У меня есть приложение для интрасети, URL которого, например: http://usid01-srv002/MyApplication. Это в IIS "Веб-сайт по умолчанию".

Что в BundleConfig.cs имеет следующее:

bundles.Add(new StyleBundle("~/bundles/jcss")
    .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);

Система связывания генерирует неверный URL-адрес для любых изображений, упомянутых в этих файлах CSS, что дает 404 даже JQueryUI очень хорошо проверенные файлы CSS (из FireBug):

например. он генерирует

http://usid01/path/foo.png

Когда он должен генерировать:

http://usid01/MyApplication/path/foo.png

Как мне получить систему связывания для создания URL-адреса, который указывает на нужное местоположение?

Ответы

Ответ 1

CssRewriteUrlTransform обновляет URL-адрес CSS с абсолютным путем, говоря так, если мы используем -

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

и у нас есть следующий класс CSS в "site.css"

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

и следующая структура папок -

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

Связывание создаст следующий URL-адрес URL-адреса для "background-image" -

 background-image: url("/Content/Images/Sandy.jpg");

И теперь, если вы будете размещать веб-сайт/веб-приложение в качестве веб-сайта на веб-сервере выше пути, потому что браузер отправит запрос для этого ресурса, используя следующий Url из-за ведущего '/'

http://<server>/content/images/sandy.jpg

но если вы размещаете веб-сайт как веб-приложение, это создаст проблему. Поскольку браузер все равно будет интерпретировать это как абсолютный Url вместо относительного и по-прежнему отправлять следующий запрос для извлечения этого ресурса -

   http://<server>/content/images/sandy.jpg

Итак, решение этой проблемы использует относительный Url даже в файле CSS, а затем удаляет CssRewriteUrlTransform из конфигурации Bundle, как показано ниже -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Ответ 2

Причиной сломанных изображений является то, что он пытается найти изображения относительно нового пути, определенного при связывании i.e.

bundles.Add(new StyleBundle("~/Content/woothemes").Include(
            "~/Content/woothemes/css/style.css",
));

Итак, если есть какой-либо путь к изображению (то есть фоновое изображение), определенный в style.css, он попытается получить свой путь относительно Контент /woothemes вместо Контент /woothemes/css/ , поэтому изображения не будут найдены

Одним из способов решения проблемы для файлов той же самой папки является определение нового пути таким же, как и в папке (файлы которого были уменьшены) i.e.

bundles.Add(new StyleBundle("~/Content/woothemes/css").Include(
            "~/Content/woothemes/css/style.css",
));

Таким образом будут сопоставлены связанные файлы и фактический путь к файлам, и будут найдены изображения, определенные в css, поэтому проблема будет решена.

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

Ответ 3

Это работает для меня,

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />