Search code examples
cssbundling-and-minificationasp.net-mvc-5.1

MVC Bundling and Minification: converts embedded images to to URL paths


In my MVC5.1 project I'm using bundling and minification with CSS rewriting transformation:

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

CssRewriteUrlTransform converts image paths relative to the root of the site. But, when I images embedded into css:

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

this is getting translated into

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

And obviously ~/Content/data:image/png;base64... does not exist.

Any way to stop this happening, other than update CSS files to not include embedded images? Or separate into different CSS files, where with actual URL are used and URL-transform this files. And another css with only embedded images.


Solution

  • Scrap that question. This is a known bug. Currently work around is to separate your css into embedded images and images via url.

    Vote for these work-items: https://aspnetoptimization.codeplex.com/workitem/88 and https://aspnetoptimization.codeplex.com/workitem/108