No route found for "GET /img/glyphicons-halflings.png"

Question

I have a question about symfony2 and bootstrap. I dont understand why I can load icons image from environment "prod" but not from environment "dev". In dev, i get this error.

The route is "GET /img/glyphicons-halflings.png".

Image web/img/glyphicons-halflings.png is a symbolic link to ../../vendor/twitter/bootstrap/img/glyphicons-halflings.png

I get this error with

http://my.web.site/app_dev.php/img/glyphicons-halflings.png

And get image with

http://my.web.site/img/glyphicons-halflings.png

UPDATE

I include bootstrap in this way:

{% stylesheets '%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less' %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}

When I use in prod this works

<span class="icon-edit"></span>

And I have this assetic configuration:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ MyAwesomeBundle ]
    filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
            apply_to: "\.less$"

I've also tried to create my collection:

assetic:
    assets:
        senso:
            inputs:
                - '../img/glyphicons-halflings.png'
            outputs:
                - 'img/glyphicons-halflings.png'
            filters:
                - ?lessphp

:dump create web/assetic/senso.png and web/assetic/senso_glyphicons-halflings.png but, ... how can works with senso*.png image?

Answer 1

config.yml

assetic:
    use_controller: false
    filters:
         lessphp:
             file: "%kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php"
    assets:   
        img_bootstrap_glyphicons_black:
            inputs:
                -  "%kernel.root_dir%/../vendor/twitter/bootstrap/img/glyphicons-halflings.png"
            output: "img/glyphicons-halflings.png"

        img_bootstrap_glyphicons_white:
            inputs:
                -  "%kernel.root_dir%/../vendor/twitter/bootstrap/img/glyphicons-halflings-white.png"
        output: "img/glyphicons-halflings-white.png"

        css_bootstrap:
            inputs:
                -  "%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less"
            output: "css/bootstrap.css"
            filters:
                - lessphp

        js_bootstrap:
            inputs:
                -  "%kernel.root_dir%/../vendor/twitter/bootstrap/js/*.js"
            output: "js/bootstrap.js"

config_dev.yml

assetic:
    use_controller: true

template

{% stylesheets '@css_bootstrap' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
{% endstylesheets %}

{% javascripts '@js_bootstrap' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}

after running assetic:dump --no-debug everything works flawlessly.

general info

the cssrewrite filter used i.e. for background-image: url("..") is incompatible with the @Bundle-syntax.

{% stylesheets 
   '@AcmeYourBundle/Resources/public/css/your.css' 
   filter="cssrewrite" 
%}   

doesn't work.

Furthermore, sources like url("../img/image.png") will fail in dev environment without cssrewrite and assetic.use_controller: true - possible workaround: use urls like url("/img/image.png") but not working with pages in subfolders.

you should keep in mind that ...

<img src="img/image.png">

... will for hostname/app_dev.php/ and all other routes except hostname/.

solution:

<img src="{{ asset('img/image.png') }}">

other solutions & tips

• when including img,css or js into your page always use twig's asset(), {% stylesheets %} or {% javascripts %} function.
• use relative urls in stylesheets i.e. url("../img/image.png")
• try setting assetic.use_controller: false in your config_dev.yml and dump your assets ... as described here
• create asset collections in config.yml, then dump your assets - see my answer here.
• use the cssembedded filter to include your images in css using data-uris - reference here
• configure your webserver to directly serve files inside img/css/js folders instead of routing through symfony
• use a different hostname (i.e. project.dev ) for the dev environment using app_dev.php as directory-index resulting in url's without /app_dev.php/

you can find some good information about this topic in the answers to this question.

my personal workflow:

• local wildcard dns server introducing automatically generated urls like project.dev , project.prod , ... ( no /app_dev.php/ problems )
• creating asset collections in config.yml ( cleaner templates, more control over assets )
• guard / grunt taskrunners instead of assetic:dump --watch ( re-dump on change but test and optimize aswell )
• source-maps and chrome-devtools instead of assetic's assetic:dump --debug ( see the real source files for combined files,less,sass,coffeescript, ... )
• tincr ( to save directly from devtools ) and livereload ( see changes instantly )