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

【问题标题】：MVC Bundling and Minification: converts embedded images to to URL pathsMVC 捆绑和缩小：将嵌入的图像转换为 URL 路径
【发布时间】：2014-03-19 16:28:58
【问题描述】：

在我的 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。

【问题讨论】：

标签： css bundling-and-minification asp.net-mvc-5.1

【解决方案1】：

放弃这个问题。这是一个已知的错误。目前的解决方法是通过 url 将您的 css 分离为嵌入的图像和图像。

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

【讨论】：

在下面查看我的答案，其中包含在 NuGet 包中的修复，以便快速安装。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

它是 CssRewriteUrlTransform 的逐字副本，但它忽略了（粗略地；））带有数据 URI 语法的 URL。

要点：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);
    }
}

【讨论】：

不错的一个！向他们发送拉取请求，将对整个社区大有裨益！
对不起，它不起作用。它将 "url('data:image" 转换为 data:image 没有前缀 "url(" 。另一方面，异常逻辑应该在 RebaseUrlToAbsolute 而不是 ConvertUrlsToAbsolute 上完成。这个其他类适用于我：github.com/benmccallum/AspNetBundling/blob/master/…

【解决方案4】：

对于带有角度项目的 asp.net mvc，我们也面临同样的问题。问题是在 prod 环境中未显示的 ag-grid base 64 图像。

作为一种解决方法，我们删除了 CssRewriteUrlTransform() 并更改了虚拟路径以匹配实际物理路径。

Old code
bundles.Add(new StyleBundle("~/bundles/styles").Include("~/Content/Site.css", new CssRewriteUrlTransform());

New code change
bundles.Add(new StyleBundle("~/dist/styles").Include("~/Content/Site.css");

最初 base64 图像正在寻找不存在的 bundles 文件夹。

Old
background: transparent url(data:image/svg+xml;base64,PHN2ZyB3a...)

被翻译成

background: transparent url(/dist/data:image/svg+xml;base64,PHN2ZyB3a...)

在进行上述更改后，base 64 图像未附加任何路径。

【讨论】：