Base64 encoded image in stylesheet

Oct 31, 2011 at 10:09 AM

If I embed a base64 encoded image in a stylesheet and let Combres minify the stylesheet then the URL is processed to be made relative as can be seen in the following example:

Stylesheet:

body {
    background: black url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAAGquMJDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi0tIzAQggJm4eXoAAA2EABsYA2zTLxEcAAAAASUVORK5CYII=") repeat center center fixed;    
}

Minified stylesheet:

body{background:black url("/Content/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAAGquMJDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi0tIzAQggJm4eXoAAA2EABsYA2zTLxEcAAAAASUVORK5CYII=") repeat center center fixed;}

 

The result is that the client tries to HTTP GET the resource: 

/Content/data:image/png;base64,iVBORw0KGgo[...]

And that resource does not exist.. :-)

How do I solve this situation ?
Mar 7, 2012 at 12:49 PM

There seems to be a bug in FixUrlsInFilter.cs. I made a fix.

Around line 82 you will find: 

// Absolute URL, return as-is
if (url.StartsWith("http", true, CultureInfo.InvariantCulture))
	return string.Format(CultureInfo.InvariantCulture, template, url);

After this add the following:

//Inline data, return as-is
if (url.StartsWith("data:"))
	return string.Format(CultureInfo.InvariantCulture, template, url);
This should fix the problem for you.

Coordinator
Apr 27, 2012 at 1:51 AM

@permagus: thanks for the suggested code change.  I've incorporated this in the latest Nuget package.