在我的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。
答案 0 :(得分:13)
废弃这个问题。这是一个已知的错误。目前的解决方法是通过网址将您的CSS分离为嵌入的图像和图像。
投票支持这些工作项:https://aspnetoptimization.codeplex.com/workitem/88和https://aspnetoptimization.codeplex.com/workitem/108
答案 1 :(得分:6)
如果您不想将嵌入的图像提取到实际文件中,并且无法等待新版本的Microsoft.AspNet.Web.Optimization nuget,则可以使用以下类。 / p>
它是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);
}
}
答案 2 :(得分:6)
查看我已解决的问题&#39;捆绑&#39;很好地融入NuGet包。 https://github.com/benmccallum/AspNetBundling
否则只需升级到grunt / gulp;)
答案 3 :(得分:0)
对于带有角度项目的asp.net mvc,我们也面临着同样的问题。问题是农业生产环境中未显示的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映像未附加任何路径。