Serving relative images using assetic

Question

I'm trying to understand symfony2 assetic bundle. I'm trying to use a jquery plugin which uses it's own css file. I've put everything in mybundle/Resources/public and then split into images/ javascript/ and css/

The plugins css is using relative paths to get the images like ../images/sprite.png

Using assetic to serve the css file:

{% stylesheets
    '@MyBundle/Resources/public/css/mycss.css' 
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

The path generated by assetic is /app_dev.php/css/mycss.css, which is correct i guess. Obviously the relative image pathes are not working anymore now. Because the files itself are located in mybundle/Resources/public and not in /images/

When trying to use the cssrewrite filter, the pathes are rewritten to: http://server.com/Resources/public/images/sprite.png. But this i not correct, the files are not located there.

How can i serve the images relative using assetic?

Answer 1

You can spell out the output path and not use cssrewrite at all.

{% stylesheets output="bundles/zaysoarbiter/css/forms2.css"
    '@ZaysoArbiterBundle/Resources/public/css/forms2.css'
%}

And then of course you use assets:install to copy your images to web/bundles/bundle/images or wherever. As far as the browser is concerned, your css and images are now located relative to each other. In production you will use assetic:dump to move the actual generated css file over.