Symfony2 CSS images path gets rewritten and I get a 404

Question

I'm using Symfony2 and assetic in an existing project and I can't figure out how to refer to images in my CSS. I've put my images in: src/Organisation/MyBundle/Resources/public/images/

After running the assets install: php app/console assets:install public

I can load them in the browser correctly: http://sitename/bundles/organisationmy/images/logo.png

However, when I try to point to them in the CSS, with: url('/bundles/organisationmy/images/logo.png')

inspecting with firebug, the url gets changed in: url('/web/bundles/organisationmy/images/logo.png') and that results in a 404.

In my main template I have:

{% stylesheets filter='yui_css' output='css/output.css'
    '@MyBundle/Resources/public/css/bootstrap.min.css'
    '@MyBundle/Resources/public/css/bootstrap-responsive.min.css'
    '@MyBundle/Resources/public/css/my.css'
 %}

And in config.yml I have:

assetic:
    debug: %kernel.debug%
    use_controller: false
    java: /usr/bin/java
    filters:
        cssrewrite: ~
        yui_css:
            jar: %kernel.root_dir%/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/java/yuicompressor-2.4.7.jar

In routing.yml I have:

_assetic:
    resource: .
    type: assetic

I've seen this question Symfony2 - Assetic - load images in CSS, but I don't know if and how I can use filter='cssrewrite' and filter='yui_css' at the same time, or how to solve the problem.

Basically if I could stop Symfony2 to prefix my CSS images paths with /web/ the problem would be solved. Or, does anyone know what is the proper way to solve this problem in Symfony2?

UPDATE: I've noticed that even if I put url('something.png') the CSS doesn't get updated anymore when I load the page, so I might have messed up something with command line, I've also given commands like php app/console assetic:dump -- how to go back to the normal dev style of modify CSS and reload page?

UPDATE2: I discovered that php app/console assetic:dump --watch updates the assets automatically as they change.

Dave Mascia · Accepted Answer · 2012-07-03T15:33:05.193

8

In order to load images in your CSS file the path must be "bundles/(bundle name)/images/(file name)"

UPDATE

make sure you have

write_to: %kernel.root_dir%/../web

under assetic: in config.yml

and

background: url('/bundles/(bundle name)/images/prev.png') in your css

then run

php app/console assets:install web

and

php app/console assetic:dump web

edited Jul 03 '12 at 15:33

answered Jul 03 '12 at 14:14

Dave Mascia

1,364
10
14

yes, Dave, thanks. That works perfectly from the browser, as I mentioned, I can load images from the browser. the problem is when I put URLs in CSS, as explained. – stivlo Jul 03 '12 at 14:16
i have the same setup as you, in my CSS file i have: background: url('/bundles/mscore/img/prev.png') left 48% no-repeat; , i also have write_to: %kernel.root_dir%/../web under assetic: in config.yml – Dave Mascia Jul 03 '12 at 14:25
so it should work, have you seen the **update** at the bottom of the question? I think the problem could be that my CSS loaded is not updated anymore. – stivlo Jul 03 '12 at 14:28
make sure you have write_to: %kernel.root_dir%/../web under assetic: in config.yml and background: url('/bundles/mscore/img/prev.png') in your css then run php app/console assets:install web then php app/console assetic:dump web – Dave Mascia Jul 03 '12 at 14:31
this works and is great! thanks Dave, now I can see the image also from CSS background. However, while is OK to run `php app/console assets:install web` whenever I add an image, it slow me down a lot if every time I modify CSS, I have to run `php app/console assetic:dump web` (it takes 1 minute). it used to work on my dev machine that I modify the CSS and changes are just immediately seen, do you have an idea why is not working anymore? – stivlo Jul 03 '12 at 14:43
You can modify css without running the commands as far as image dropping.. i don't know, never had that one – Dave Mascia Jul 03 '12 at 15:01
anyway, if you update your question with the suggestions in the comment (write_to:, php app/console commands), I can accept it as the answer, since it solved the problem of showing the images. – stivlo Jul 03 '12 at 15:25

Symfony2 CSS images path gets rewritten and I get a 404

1 Answers1