MVC捆绑和缩小:将嵌入的图像转换为URL路径

Question

在我的MVC5.1项目中,我正在使用CSS重写转换进行捆绑和缩小:

styleBundle.Include("~/Content/Site.css", new CssRewriteUrlTransform());
bundles.Add(styleBundle);

CssRewriteUrlTransform转换相对于站点根目录的图像路径.但是,当我将图像嵌入到css中时:

span.file {
  background-image: url(data:image/png;base64,iVBORw0KGg+...2AAAAElFTkSuQmCC);
}

这被翻译成了

span.file {
  background-image: url(http://localhost:52253/Content/data:image/png;base64,iVBORg...mCC);
}

而且显然~/Content/data:image/png;base64...不存在.

有什么方法可以阻止这种情况发生,除了更新CSS文件不包括嵌入的图像？或者分成不同的CSS文件,其中使用实际的URL并对这些文件进行URL转换.而另一个只有嵌入图像的CSS.

Answer 1

废弃那个问题.这是一个已知的错误.目前的工作是通过URL将您的CSS分离为嵌入的图像和图像.

投票支持这些工作项目:https://aspnetoptimization.codeplex.com/workitem/88和https://aspnetoptimization.codeplex.com/workitem/108

Answer 2

如果您不想将嵌入的图像提取到实际文件,并且不能等待新版本的Microsoft.AspNet.Web.Optimization nuget,则可以使用以下类.

它是CssRewriteUrlTransform的逐字副本,除了它忽略(粗略地))URL与数据URI语法.

要点:https://gist.github.com/janv8000/fa69b2ab6886f635e3df

/// <remarks>Part of Microsoft.AspNet.Web.Optimization.1.1.3, forked to ignore data-uri</remarks>
public class CssRewriteUrlTransformIgnoringDataUri : IItemTransform
{
    internal static string RebaseUrlToAbsolute(string baseUrl, string url)
    {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase))
            return url;
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase))
            baseUrl = baseUrl + "/";
        return VirtualPathUtility.ToAbsolute(baseUrl + url);
    }

    internal static string ConvertUrlsToAbsolute(string baseUrl, string content)
    {
        if (string.IsNullOrWhiteSpace(content))
        { return content; }

        return new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)").Replace(content, match =>
        {
            var format = match.Groups["url"].Value;
            if (format.StartsWith("data:image", StringComparison.CurrentCultureIgnoreCase))
            {
                return format;
            }

            return "url(" + RebaseUrlToAbsolute(baseUrl, format) + ")";
        });
    }

    public string Process(string includedVirtualPath, string input)
    {
        if (includedVirtualPath == null)
        {
            throw new ArgumentNullException("includedVirtualPath");
        }
        return ConvertUrlsToAbsolute(VirtualPathUtility.GetDirectory(includedVirtualPath.Substring(1)), input);
    }
}

Answer 3

检查我的解决方法,我已经很好地捆绑到NuGet包中.https://github.com/benmccallum/AspNetBundling

否则只需升级到grunt/gulp;)