css image path with version for CDN

Question

I'm working with the following paradigm for handling my CDN caching: Each path contains "?version", for example: http://mycdn.com/some-javascript-file.js?123

The same paradigm is used for all of my resources (js, css, images), the problem I'm encountering is images paths in a css file.

For example, I have the following snippet in one of my css's:

"url (../../Images/example.png)"

The problem is that this image path doesn't use the version paradigm, I would like to add the version to the path somehow, is there a nice way to do this, except of the following methods: 1) For each image change - also change the css with some dummy version.

"url (../../Images/example.png?1)" - change 1

"url (../../Images/example.png?55)" - change 2

2) Transfer all of my css's files to be aspx files and to use the code-behind in order to define the version:

"<%= html.VersionUrl("../../Images/example.png")%>"

3) Use dotless lib: http://www.dotlesscss.org/

Any other simple/nice idea?

Answer 1

The best solution which I've found was to change the version tag to be at the beginning of the url and to use url rewrite in order to process the requests. So if for example I used to had:

http://website/Content/Images/1.png?123456

this will become to:

http://website/123456/Content/Images/1.png

Notice that I use url rewrite in order the process the request so that http://website/123456/Content/Images/1.png will actually bring the data from http://website/Content/Images/1.png