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

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 )