MVC4 StyleBundle не разрешает изображения

275

Мой вопрос аналогичен этому:

ASP.NET MVC 4 Минимизация и фоновые изображения

За исключением того, что я хочу придерживаться собственного связывания MVC, если могу. У меня случился сбой в мозге, пытаясь выяснить, какой правильный шаблон предназначен для определения пакетов стилей, таких как автономные css и наборы изображений, такие как jQuery UI work.

У меня есть типичная структура сайта MVC с /Content/css/, которая содержит мой базовый CSS, такой как styles.css. Внутри этой папки css у меня также есть подпапки, такие как /jquery-ui, который содержит свой файл CSS плюс папку /images. Пути изображений в jQuery UI CSS относятся к этой папке, и я не хочу с ними связываться.

Как я понимаю, когда я указываю StyleBundle, мне нужно указать виртуальный путь, который также не соответствует реальному пути к контенту, потому что (предполагая, что я игнорирую маршруты к Контенту) IIS попытается решить эту проблему путь как физический файл. Поэтому я указываю:

bundles.Add(new StyleBundle("~/Content/styles/jquery-ui")
       .Include("~/Content/css/jquery-ui/*.css"));

используя:

@Styles.Render("~/Content/styles/jquery-ui")

Я вижу, как запрос выходит:

http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

Это возвращает правильный, уменьшенный ответ CSS. Но затем браузер отправляет запрос относительно относительно связанного изображения как:

http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

Что такое 404.

Я понимаю, что последняя часть моего URL jquery-ui - это URL без продолжения, обработчик для моего пакета, поэтому я могу понять, почему относительный запрос для изображения просто /styles/images/.

Итак, мой вопрос: , что это правильный способ справиться с этой ситуацией?

  • 9
    После того, как я снова и снова разочаровывался в новой части Bundling and Minification, я перешел к Касте, ведьма теперь свободна и работает намного лучше!
  • 3
    Спасибо за ссылку, Кассета выглядит хорошо, и я обязательно ее проверю. Но я хочу придерживаться предоставленного подхода, если это возможно, конечно, это должно быть возможно без путаницы с путями к изображениям в сторонних файлах CSS каждый раз, когда выпускается новая версия. на данный момент я сохранил свои ScriptBundles (которые хорошо работают), но вернулся к простым ссылкам CSS, пока не получу разрешение. Приветствия.
Показать ещё 1 комментарий
Теги:
asp.net-mvc-4
bundle
asp.net-optimization

15 ответов

362
Лучший ответ

В соответствии с этим потоком связывание MVC4 css и ссылки на изображения, если вы определяете свой пакет как:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css"));

Если вы определяете пакет на том же пути, что и исходные файлы, составляющие комплект, относительные пути к изображениям все равно будут работать. Последняя часть пути связки действительно является file name для этого конкретного пакета (т.е. /bundle может быть любым именем, которое вам нравится).

Это будет работать только в том случае, если вы объединяете CSS из одной и той же папки (что, я думаю, имеет смысл с точки зрения объединения).

Обновление

В соответствии с комментарием, приведенным ниже @Hao Kung, альтернативно это может быть достигнуто путем применения CssRewriteUrlTransformation (Изменение относительных ссылок на ссылки на файлы CSS при вложении).

ПРИМЕЧАНИЕ. Я не подтвердил комментарии относительно проблем с переписыванием абсолютных путей в виртуальном каталоге, поэтому это может не работать для всех (?).

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css",
                    new CssRewriteUrlTransform()));
  • 1
    Легенда! Да, это работает отлично. У меня есть CSS на разных уровнях, но у каждого из них есть свои собственные папки с изображениями, например, CSS моего основного сайта находится в корневой папке CSS, а затем внутри него находится jquery-ui со своей собственной папкой изображений, поэтому я просто указываю 2 пакета, один для моего базовый CSS и один для jQuery UI - который может быть неоптимальным с точки зрения запросов, но жизнь коротка. Ура!
  • 3
    Да, к сожалению, пока в комплекте нет поддержки перезаписи встроенных URL-адресов внутри самого css, вам нужен виртуальный каталог пакета css, соответствующий файлам css перед объединением. Вот почему шаблоны по умолчанию не имеют URL-адресов, таких как ~ / bundles / themes, и вместо этого выглядят как структура каталогов: ~ / content / theemes / base / css
Показать ещё 14 комментариев
33

Решение Grinn/ThePirat работает хорошо.

Мне не понравилось, что это новый метод Include on bundle, и что он создал временные файлы в каталоге содержимого. (они в конечном итоге были проверены, развернуты, тогда служба не запустилась!)

Итак, чтобы следовать дизайну Bundling, я решил выполнить по существу тот же код, но в реализации IBundleTransform::

class StyleRelativePathTransform
    : IBundleTransform
{
    public StyleRelativePathTransform()
    {
    }

    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = String.Empty;

        Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
        // open each of the files
        foreach (FileInfo cssFileInfo in response.Files)
        {
            if (cssFileInfo.Exists)
            {
                // apply the RegEx to the file (to change relative paths)
                string contents = File.ReadAllText(cssFileInfo.FullName);
                MatchCollection matches = pattern.Matches(contents);
                // Ignore the file if no match 
                if (matches.Count > 0)
                {
                    string cssFilePath = cssFileInfo.DirectoryName;
                    string cssVirtualPath = context.HttpContext.RelativeFromAbsolutePath(cssFilePath);
                    foreach (Match match in matches)
                    {
                        // this is a path that is relative to the CSS file
                        string relativeToCSS = match.Groups[2].Value;
                        // combine the relative path to the cssAbsolute
                        string absoluteToUrl = Path.GetFullPath(Path.Combine(cssFilePath, relativeToCSS));

                        // make this server relative
                        string serverRelativeUrl = context.HttpContext.RelativeFromAbsolutePath(absoluteToUrl);

                        string quote = match.Groups[1].Value;
                        string replace = String.Format("url({0}{1}{0})", quote, serverRelativeUrl);
                        contents = contents.Replace(match.Groups[0].Value, replace);
                    }
                }
                // copy the result into the response.
                response.Content = String.Format("{0}\r\n{1}", response.Content, contents);
            }
        }
    }
}

И затем заверните это в Bundle Implemetation:

public class StyleImagePathBundle 
    : Bundle
{
    public StyleImagePathBundle(string virtualPath)
        : base(virtualPath)
    {
        base.Transforms.Add(new StyleRelativePathTransform());
        base.Transforms.Add(new CssMinify());
    }

    public StyleImagePathBundle(string virtualPath, string cdnPath)
        : base(virtualPath, cdnPath)
    {
        base.Transforms.Add(new StyleRelativePathTransform());
        base.Transforms.Add(new CssMinify());
    }
}

Пример использования:

static void RegisterBundles(BundleCollection bundles)
{
...
    bundles.Add(new StyleImagePathBundle("~/bundles/Bootstrap")
            .Include(
                "~/Content/css/bootstrap.css",
                "~/Content/css/bootstrap-responsive.css",
                "~/Content/css/jquery.fancybox.css",
                "~/Content/css/style.css",
                "~/Content/css/error.css",
                "~/Content/validation.css"
            ));

Вот мой метод расширения для RelativeFromAbsolutePath:

   public static string RelativeFromAbsolutePath(this HttpContextBase context, string path)
    {
        var request = context.Request;
        var applicationPath = request.PhysicalApplicationPath;
        var virtualDir = request.ApplicationPath;
        virtualDir = virtualDir == "/" ? virtualDir : (virtualDir + "/");
        return path.Replace(applicationPath, virtualDir).Replace(@"\", "/");
    }
  • 0
    Мне это тоже кажется чистым. Благодарю. Я голосую за всех троих, потому что это выглядело как командная работа. :)
  • 0
    Код, который у вас есть сейчас, не работает для меня. Я пытаюсь это исправить, но подумала, что дам тебе знать. Метод context.HttpContext.RelativeFromAbsolutePath не существует. Кроме того, если путь URL начинается с «/» (что делает его абсолютным), ваша логика объединения путей отключена.
Показать ещё 11 комментариев
21

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

using System;
using System.Collections.Generic;
using IO = System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Optimization;

...

public class StyleImagePathBundle : Bundle
{
    public StyleImagePathBundle(string virtualPath)
        : base(virtualPath, new IBundleTransform[1]
      {
        (IBundleTransform) new CssMinify()
      })
    {
    }

    public StyleImagePathBundle(string virtualPath, string cdnPath)
        : base(virtualPath, cdnPath, new IBundleTransform[1]
      {
        (IBundleTransform) new CssMinify()
      })
    {
    }

    public new Bundle Include(params string[] virtualPaths)
    {
        if (HttpContext.Current.IsDebuggingEnabled)
        {
            // Debugging. Bundling will not occur so act normal and no one gets hurt.
            base.Include(virtualPaths.ToArray());
            return this;
        }

        // In production mode so CSS will be bundled. Correct image paths.
        var bundlePaths = new List<string>();
        var svr = HttpContext.Current.Server;
        foreach (var path in virtualPaths)
        {
            var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
            var contents = IO.File.ReadAllText(svr.MapPath(path));
            if(!pattern.IsMatch(contents))
            {
                bundlePaths.Add(path);
                continue;
            }


            var bundlePath = (IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/";
            var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath);
            var bundleFilePath = String.Format("{0}{1}.bundle{2}",
                                               bundlePath,
                                               IO.Path.GetFileNameWithoutExtension(path),
                                               IO.Path.GetExtension(path));
            contents = pattern.Replace(contents, "url($1" + bundleUrlPath + "$2$1)");
            IO.File.WriteAllText(svr.MapPath(bundleFilePath), contents);
            bundlePaths.Add(bundleFilePath);
        }
        base.Include(bundlePaths.ToArray());
        return this;
    }

}

Чтобы использовать его, выполните:

bundles.Add(new StyleImagePathBundle("~/bundles/css").Include(
  "~/This/Is/Some/Folder/Path/layout.css"));

... вместо...

bundles.Add(new StyleBundle("~/bundles/css").Include(
  "~/This/Is/Some/Folder/Path/layout.css"));

Что он делает (когда не в режиме отладки) ищет url(<something>) и заменяет его на url(<absolute\path\to\something>). Я написал это примерно 10 секунд назад, поэтому может потребоваться небольшая настройка. Я принял во внимание полностью квалифицированные URL-адреса и base64 DataURI, убедившись, что в пути URL нет (:) в пути URL. В нашей среде изображения обычно находятся в той же папке, что и файлы css, но я тестировал ее как с родительскими папками (url(../someFile.png)), так и с дочерними папками (url(someFolder/someFile.png).

  • 0
    Это отличное решение. Я немного изменил ваш Regex, чтобы он также работал с файлами LESS, но оригинальная концепция была именно тем, что мне было нужно. Благодарю.
  • 0
    Вы можете также поставить инициализацию регулярных выражений вне цикла. Возможно как статическое свойство только для чтения.
12

Нет необходимости указывать преобразование или иметь сумасшедшие пути подкаталогов. После многого устранения неполадок я выделил его на это "простое" правило (это ошибка?)...

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

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

Чтобы уточнить, вот пример:

У меня есть эти файлы...

~/Content/Images/Backgrounds/Some_Background_Tile.gif
~/Content/Site.css  - references the background image relatively, i.e. background: url('Images/...')

Затем установите связку, как...

BundleTable.Add(new StyleBundle("~/Bundles/Styles").Include("~/Content/Site.css"));

И сделайте это как...

@Styles.Render("~/Bundles/Styles")

И получите "поведение" (ошибка), сами файлы CSS имеют корень приложения (например, "http://localhost: 1234/MySite/Content/Site.css" ), но изображение CSS внутри всего запуска "/Content/Images/..." или "/Images/..." в зависимости от того, добавляю ли я преобразование или нет.

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

Значение этого примера фиксируется регистрацией и отображением пути связки, как..

BundleTable.Add(new StyleBundle("~/Content/StylesBundle").Include("~/Content/Site.css"));
...
@Styles.Render("~/Content/StylesBundle")

Итак, вы можете сказать, что это RTFM, но я совершенно уверен, что я и другие выбрали этот путь "~/Bundles/..." из шаблона по умолчанию или где-нибудь в документации на MSDN или веб-сайте ASP.NET сайт или просто наткнулся на него, потому что на самом деле это довольно логичное имя для виртуального пути и имеет смысл выбирать такие виртуальные пути, которые не конфликтуют с реальными каталогами.

Во всяком случае, так оно и есть. Microsoft не видит ошибки. Я не согласен с этим, либо он должен работать как ожидалось, либо какое-либо исключение должно быть брошено, либо дополнительное переопределение для добавления пути к пакету, который позволяет включить корень приложения или нет. Я не могу себе представить, почему кто-то не хотел, чтобы root был включен в приложение, когда он был один (обычно, если вы не установили свой веб-сайт с псевдонимом DNS-псевдонима/по умолчанию). Так что в любом случае это должно быть по умолчанию.

  • 0
    Мне кажется самое простое «решение». Другие могут иметь побочные эффекты, как с изображением: данные.
  • 0
    Нет не работает
Показать ещё 4 комментария
9

Я обнаружил, что CssRewriteUrlTransform не запускается, если вы ссылаетесь на файл *.css, и у вас есть связанный файл *.min.css в той же папке.

Чтобы исправить это, либо удалите файл *.min.css, либо укажите его прямо в своем комплекте:

bundles.Add(new Bundle("~/bundles/bootstrap")
    .Include("~/Libs/bootstrap3/css/bootstrap.min.css", new CssRewriteUrlTransform()));

После этого ваши URL-адреса будут правильно преобразованы и ваши изображения должны быть правильно разрешены.

  • 1
    Спасибо! После двух дней поиска в Интернете это первое упоминание о том, что CssRewriteUrlTransform работает с файлами * .css, но не со связанным файлом * .min.css, который извлекается, когда вы не запускаете отладку. среда. Определенно мне кажется, что это ошибка. Придется вручную проверять тип среды, чтобы определить пакет с незавершенной версией для отладки, но по крайней мере у меня есть обходной путь сейчас!
  • 0
    Это решило проблему для меня. Это, конечно, похоже на ошибку. Не имеет смысла, что он должен игнорировать CssRewriteUrlTransform, если он находит ранее существующий файл .min.css.
8

Хотя ответ Криса Бакстера помогает с оригинальной проблемой, он не работает в моем случае , когда приложение размещено в виртуальном каталоге. Изучив варианты, я закончил решение DIY.

ProperStyleBundle класс включает код, заимствованный из оригинала CssRewriteUrlTransform, чтобы правильно преобразовать относительные пути в виртуальном каталоге. Он также выдает, если файл не существует и предотвращает переупорядочение файлов в пакете (код, взятый из BetterStyleBundle).

using System;
using System.Collections.Generic;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Optimization;
using System.Linq;

namespace MyNamespace
{
    public class ProperStyleBundle : StyleBundle
    {
        public override IBundleOrderer Orderer
        {
            get { return new NonOrderingBundleOrderer(); }
            set { throw new Exception( "Unable to override Non-Ordered bundler" ); }
        }

        public ProperStyleBundle( string virtualPath ) : base( virtualPath ) {}

        public ProperStyleBundle( string virtualPath, string cdnPath ) : base( virtualPath, cdnPath ) {}

        public override Bundle Include( params string[] virtualPaths )
        {
            foreach ( var virtualPath in virtualPaths ) {
                this.Include( virtualPath );
            }
            return this;
        }

        public override Bundle Include( string virtualPath, params IItemTransform[] transforms )
        {
            var realPath = System.Web.Hosting.HostingEnvironment.MapPath( virtualPath );
            if( !File.Exists( realPath ) )
            {
                throw new FileNotFoundException( "Virtual path not found: " + virtualPath );
            }
            var trans = new List<IItemTransform>( transforms ).Union( new[] { new ProperCssRewriteUrlTransform( virtualPath ) } ).ToArray();
            return base.Include( virtualPath, trans );
        }

        // This provides files in the same order as they have been added. 
        private class NonOrderingBundleOrderer : IBundleOrderer
        {
            public IEnumerable<BundleFile> OrderFiles( BundleContext context, IEnumerable<BundleFile> files )
            {
                return files;
            }
        }

        private class ProperCssRewriteUrlTransform : IItemTransform
        {
            private readonly string _basePath;

            public ProperCssRewriteUrlTransform( string basePath )
            {
                _basePath = basePath.EndsWith( "/" ) ? basePath : VirtualPathUtility.GetDirectory( basePath );
            }

            public string Process( string includedVirtualPath, string input )
            {
                if ( includedVirtualPath == null ) {
                    throw new ArgumentNullException( "includedVirtualPath" );
                }
                return ConvertUrlsToAbsolute( _basePath, input );
            }

            private static string RebaseUrlToAbsolute( string baseUrl, string url )
            {
                if ( string.IsNullOrWhiteSpace( url )
                     || string.IsNullOrWhiteSpace( baseUrl )
                     || url.StartsWith( "/", StringComparison.OrdinalIgnoreCase )
                     || url.StartsWith( "data:", StringComparison.OrdinalIgnoreCase )
                    ) {
                    return url;
                }
                if ( !baseUrl.EndsWith( "/", StringComparison.OrdinalIgnoreCase ) ) {
                    baseUrl = baseUrl + "/";
                }
                return VirtualPathUtility.ToAbsolute( baseUrl + url );
            }

            private static string ConvertUrlsToAbsolute( string baseUrl, string content )
            {
                if ( string.IsNullOrWhiteSpace( content ) ) {
                    return content;
                }
                return new Regex( "url\\(['\"]?(?<url>[^)]+?)['\"]?\\)" )
                    .Replace( content, ( match =>
                                         "url(" + RebaseUrlToAbsolute( baseUrl, match.Groups["url"].Value ) + ")" ) );
            }
        }
    }
}

Используйте его как StyleBundle:

bundles.Add( new ProperStyleBundle( "~/styles/ui" )
    .Include( "~/Content/Themes/cm_default/style.css" )
    .Include( "~/Content/themes/custom-theme/jquery-ui-1.8.23.custom.css" )
    .Include( "~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" )
    .Include( "~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css" ) );
  • 2
    Хорошее решение, но все равно не работает (так же, как CssRewriteUrlTransform), если у вас есть URI данных в вашем CSS (например, «data: image / png; base64, ...»). Вы не должны изменять URL, начинающийся с «data:» в RebaseUrlToAbsolute ().
  • 1
    @ miles82 Конечно! Спасибо за указание на это. Я изменил RebaseUrlToAbsolute ().
7

Возможно, я предвзятый, но мне очень нравится мое решение, так как оно не делает никакого преобразования, регулярное выражение и т.д., и оно имеет наименьшее количество кода:)

Это работает для сайта, размещенного как Виртуальный каталог на веб-сайте IIS и в качестве корневого веб-сайта в IIS

Итак, я создал Implentation IItemTransform, инкапсулированный CssRewriteUrlTransform и использующий VirtualPathUtility, чтобы исправить путь и вызвать существующий код:

/// <summary>
/// Is a wrapper class over CssRewriteUrlTransform to fix url in css files for sites on IIS within Virutal Directories
/// and sites at the Root level
/// </summary>
public class CssUrlTransformWrapper : IItemTransform
{
    private readonly CssRewriteUrlTransform _cssRewriteUrlTransform;

    public CssUrlTransformWrapper()
    {
        _cssRewriteUrlTransform = new CssRewriteUrlTransform();
    }

    public string Process(string includedVirtualPath, string input)
    {
        return _cssRewriteUrlTransform.Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}


//App_Start.cs
public static void Start()
{
      BundleTable.Bundles.Add(new StyleBundle("~/bundles/fontawesome")
                         .Include("~/content/font-awesome.css", new CssUrlTransformWrapper()));
}

Кажется, все в порядке для меня?

  • 1
    Это идеально подходит для меня. отличное решение. мой голос +1
  • 1
    Это правильный ответ. Класс CssUrlTransformWrapper, предоставляемый платформой, решает проблему, за исключением того, что он не работает, только когда приложение не находится в корне веб-сайта. Эта обертка лаконично устраняет этот недостаток.
6

Вот Трансформация Bundle, которая заменит URL-адреса css URL-адресами относительно этого файла css. Просто добавьте его в свой комплект, и это должно решить проблему.

public class CssUrlTransform: IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response) {
        Regex exp = new Regex(@"url\([^\)]+\)", RegexOptions.IgnoreCase | RegexOptions.Singleline);
        foreach (FileInfo css in response.Files) {
            string cssAppRelativePath = css.FullName.Replace(context.HttpContext.Request.PhysicalApplicationPath, context.HttpContext.Request.ApplicationPath).Replace(Path.DirectorySeparatorChar, '/');
            string cssDir = cssAppRelativePath.Substring(0, cssAppRelativePath.LastIndexOf('/'));
            response.Content = exp.Replace(response.Content, m => TransformUrl(m, cssDir));
        }
    }


    private string TransformUrl(Match match, string cssDir) {
        string url = match.Value.Substring(4, match.Length - 5).Trim('\'', '"');

        if (url.StartsWith("http://") || url.StartsWith("data:image")) return match.Value;

        if (!url.StartsWith("/"))
            url = string.Format("{0}/{1}", cssDir, url);

        return string.Format("url({0})", url);
    }

}
  • 0
    Это работает для меня, спасибо!
  • 0
    Как это использовать ?, Это покажет мне исключение: cannot convert type from BundleFile to FileInfo
Показать ещё 2 комментария
6

В версии v1.1.0-alpha1 (пакет предварительного выпуска) среда использует VirtualPathProvider для доступа к файлам, а не для прикосновения к физической файловой системе.

Обновленный трансформатор можно увидеть ниже:

public class StyleRelativePathTransform
    : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);

        response.Content = string.Empty;

        // open each of the files
        foreach (var file in response.Files)
        {
            using (var reader = new StreamReader(file.Open()))
            {
                var contents = reader.ReadToEnd();

                // apply the RegEx to the file (to change relative paths)
                var matches = pattern.Matches(contents);

                if (matches.Count > 0)
                {
                    var directoryPath = VirtualPathUtility.GetDirectory(file.VirtualPath);

                    foreach (Match match in matches)
                    {
                        // this is a path that is relative to the CSS file
                        var imageRelativePath = match.Groups[2].Value;

                        // get the image virtual path
                        var imageVirtualPath = VirtualPathUtility.Combine(directoryPath, imageRelativePath);

                        // convert the image virtual path to absolute
                        var quote = match.Groups[1].Value;
                        var replace = String.Format("url({0}{1}{0})", quote, VirtualPathUtility.ToAbsolute(imageVirtualPath));
                        contents = contents.Replace(match.Groups[0].Value, replace);
                    }

                }
                // copy the result into the response.
                response.Content = String.Format("{0}\r\n{1}", response.Content, contents);
            }
        }
    }
}
  • 0
    На самом деле, что это делает, если заменить относительные URL в CSS на абсолютные.
4

Решение Grinn велико.

Однако это не работает для меня, когда в URL-адресе имеются относительные ссылки родительских папок. т.е. url('../../images/car.png')

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

Я также изменил IF DEBUG, чтобы проверить BundleTable.EnableOptimizations вместо HttpContext.Current.IsDebuggingEnabled.

    public new Bundle Include(params string[] virtualPaths)
    {
        if (!BundleTable.EnableOptimizations)
        {
            // Debugging. Bundling will not occur so act normal and no one gets hurt. 
            base.Include(virtualPaths.ToArray());
            return this;
        }
        var bundlePaths = new List<string>();
        var server = HttpContext.Current.Server;
        var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
        foreach (var path in virtualPaths)
        {
            var contents = File.ReadAllText(server.MapPath(path));
            var matches = pattern.Matches(contents);
            // Ignore the file if no matches
            if (matches.Count == 0)
            {
                bundlePaths.Add(path);
                continue;
            }
            var bundlePath = (System.IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/";
            var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath);
            var bundleFilePath = string.Format("{0}{1}.bundle{2}",
                                               bundlePath,
                                               System.IO.Path.GetFileNameWithoutExtension(path),
                                               System.IO.Path.GetExtension(path));
            // Transform the url (works with relative path to parent folder "../")
            contents = pattern.Replace(contents, m =>
            {
                var relativeUrl = m.Groups[2].Value;
                var urlReplace = GetUrlReplace(bundleUrlPath, relativeUrl, server);
                return string.Format("url({0}{1}{0})", m.Groups[1].Value, urlReplace);
            });
            File.WriteAllText(server.MapPath(bundleFilePath), contents);
            bundlePaths.Add(bundleFilePath);
        }
        base.Include(bundlePaths.ToArray());
        return this;
    }


    private string GetUrlReplace(string bundleUrlPath, string relativeUrl, HttpServerUtility server)
    {
        // Return the absolute uri
        Uri baseUri = new Uri("http://dummy.org");
        var absoluteUrl = new Uri(new Uri(baseUri, bundleUrlPath), relativeUrl).AbsolutePath;
        var localPath = server.MapPath(absoluteUrl);
        if (IsEmbedEnabled && File.Exists(localPath))
        {
            var fi = new FileInfo(localPath);
            if (fi.Length < 0x4000)
            {
                // Embed the image in uri
                string contentType = GetContentType(fi.Extension);
                if (null != contentType)
                {
                    var base64 = Convert.ToBase64String(File.ReadAllBytes(localPath));
                    // Return the serialized image
                    return string.Format("data:{0};base64,{1}", contentType, base64);
                }
            }
        }
        // Return the absolute uri 
        return absoluteUrl;
    }

Надеюсь, что это поможет, приветствует.

  • 0
    Это решение работает, но оно создает временные файлы комплекта.
4

Другой вариант - использовать модуль Rewrite URL-адреса IIS для сопоставления папки виртуального пакета в папку физического изображения. Ниже приведен пример правила перезаписи, которое вы можете использовать для пакета, называемого "~/bundles/yourpage/styles". Обратите внимание, что регулярные выражения соответствуют буквенно-цифровым символам, а также дефисам, символам подчеркивания и периодам, которые являются общими для имен файлов изображений.

<rewrite>
  <rules>
    <rule name="Bundle Images">
      <match url="^bundles/yourpage/images/([a-zA-Z0-9\-_.]+)" />
      <action type="Rewrite" url="Content/css/jquery-ui/images/{R:1}" />
    </rule>
  </rules>
</rewrite>

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

2

У меня была эта проблема с пучками, у которых неправильный путь к изображениям, а CssRewriteUrlTransform - правильно разрешить относительные родительские пути .. (была проблема с внешними ресурсами, такими как webfonts). Вот почему я написал это настраиваемое преобразование (похоже, все это правильно):

public class CssRewriteUrlTransform2 : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        var pathParts = includedVirtualPath.Replace("~/", "/").Split('/');
        pathParts = pathParts.Take(pathParts.Count() - 1).ToArray();
        return Regex.Replace
        (
            input,
            @"(url\(['""]?)((?:\/??\.\.)*)(.*?)(['""]?\))",
            m => 
            {
                // Somehow assigning this to a variable is faster than directly returning the output
                var output =
                (
                    // Check if it an aboslute url or base64
                    m.Groups[3].Value.IndexOf(':') == -1 ?
                    (
                        m.Groups[1].Value +
                        (
                            (
                                (
                                    m.Groups[2].Value.Length > 0 ||
                                    !m.Groups[3].Value.StartsWith('/')
                                )
                            ) ?
                            string.Join("/", pathParts.Take(pathParts.Count() - m.Groups[2].Value.Count(".."))) :
                            ""
                        ) +
                        (!m.Groups[3].Value.StartsWith('/') ? "/" + m.Groups[3].Value : m.Groups[3].Value) +
                        m.Groups[4].Value
                    ) :
                    m.Groups[0].Value
                );
                return output;
            }
        );
    }
}

Изменить: я этого не понимал, но я использовал некоторые специальные методы расширения в коде. Исходный код:

/// <summary>
/// Based on: http://stackoverflow.com/a/11773674
/// </summary>
public static int Count(this string source, string substring)
{
    int count = 0, n = 0;

    while ((n = source.IndexOf(substring, n, StringComparison.InvariantCulture)) != -1)
    {
        n += substring.Length;
        ++count;
    }
    return count;
}

public static bool StartsWith(this string source, char value)
{
    if (source.Length == 0)
    {
        return false;
    }
    return source[0] == value;
}

Конечно, должно быть возможно заменить String.StartsWith(char) на String.StartsWith(string).

  • 0
    У меня нет перегрузки String.Count (), которая принимает строку ( m.Groups[2].Value.Count("..") не работает.) И Value.StartsWith('/') didn ' либо не работает, потому что StartsWith ожидает строку вместо символа.
  • 0
    @jao мой плохой Я включил свои собственные методы расширения в код, не осознавая этого.
Показать ещё 1 комментарий
2

Вы можете просто добавить еще один уровень глубины в свой виртуальный путь пакета

    //Two levels deep bundle path so that paths are maintained after minification
    bundles.Add(new StyleBundle("~/Content/css/css").Include("~/Content/bootstrap/bootstrap.css", "~/Content/site.css"));

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

  • 0
    Это не помогает, если ваше веб-приложение является виртуальным приложением в IIS. Я имею в виду, что это может работать, но вы должны назвать свое виртуальное приложение IIS как в своем коде, что не то, что вы хотите, не так ли?
  • 0
    У меня та же проблема, когда приложение является виртуальным приложением в IIS. Этот ответ помогает мне.
1

После небольшого расследования я заключил следующее: У вас есть 2 варианта:

  • перейти с преобразованиями. Очень полезный пакет для этого: https://bundletransformer.codeplex.com/ вам нужно следующее преобразование для каждого проблемного пакета:

    BundleResolver.Current = new CustomBundleResolver();
    var cssTransformer = new StyleTransformer();
    standardCssBundle.Transforms.Add(cssTransformer);
    bundles.Add(standardCssBundle);
    

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

  1. Используйте один и тот же относительный корень для имени пакета, например, где находится файл css. Преимущества: нет необходимости в трансформации. Недостатки: у вас есть ограничение на объединение css-листов из разных каталогов в один пакет.
0

CssRewriteUrlTransform исправлена ​​моя проблема.
Если ваш код по-прежнему не загружает изображения после использования CssRewriteUrlTransform, тогда измените имя файла css:

.Include("~/Content/jquery/jquery-ui-1.10.3.custom.css", new CssRewriteUrlTransform())

To:

.Include("~/Content/jquery/jquery-ui.css", new CssRewriteUrlTransform())

Несколько. (точки) не распознаются в URL-адресе.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню