Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 977
trailmax Avatar asked Feb 19 '14 11:02

trailmax


People also ask

What is the use of bundling and minification in MVC?

Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)

How is minification done in MVC?

MVC implements a process called minification on the bundled files. Minification removes all whitespace and renames variables to their shortest possible name, thereby removing all excess characters (and thereby excess file size) from the bundle. Because the file is smaller, it takes less time to download.

How do I bundle a script in MVC?

You can create style or script bundles in BundleConfig class under App_Start folder in an ASP.NET MVC project. (you can create your own custom class instead of using BundleConfig class, but it is recommended to follow standard practice.)

What is bundling in CSS?

Bundling is the process of rolling up a number of distinct resources together into a single downloadable resource. For example, a bundle may consist of multiple JavaScript or CSS files you bring down to the local machine by making a single HTTP request to an ad hoc endpoint.


1 Answers

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

like image 120
trailmax Avatar answered Sep 20 '22 12:09

trailmax