twitter-bootstrap 没有找到“GET /img/glyphicons-halflings.png”的路径

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

提问by sensorario

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.

我有一个关于 symfony2 和 bootstrap 的问题。我不明白为什么我可以从环境“prod”而不是从环境“dev”加载图标图像。在开发中，我收到此错误。

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

路线是“GET /img/glyphicons-halflings.png”。

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

图像 web/img/glyphicons-halflings.png 是到 ../../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?

:dump 创建 web/assetic/senso.png 和 web/assetic/senso_glyphicons-halflings.png 但是，...如何使用 senso*.png 图像？

回答by Nicolai Fr?hlich

config.yml

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

config_dev.yml

assetic:
    use_controller: true

template

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-debugeverything works flawlessly.

运行后assetic:dump --no-debug一切正常。

general info

基本信息

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

用于 ie for的cssrewrite过滤器background-image: url("..")与@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.

此外，url("../img/image.png")在没有 cssrewrite 和assetic.use_controller: true- 可能的解决方法的开发环境中，像这样的源将失败：使用像url("/img/image.png")但不使用子文件夹中的页面的url 。

you should keep in mind that ...

你应该记住...

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

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

... will forhostname/app_dev.php/和除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: falsein your config_dev.ymland dump your assets ... as described here
• create asset collectionsin 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.phpas directory-index resulting in url's without /app_dev.php/

• 在页面中包含 img、css 或 js 时，请始终使用 twig 的asset(),{% stylesheets %}或{% javascripts %}函数。
• 在样式表中使用相对 url，即 url("../img/image.png")
• 尝试设置assetic.use_controller: false在你config_dev.yml和转储你的资产......如描述在这里
• 创建资源集合中config.yml，然后倾倒你的资产-看到我的答案在这里。
• 使用 cssembedded 过滤器使用 data-uris 在 css 中包含您的图像 - 参考这里
• 配置您的网络服务器以直接提供 img/css/js 文件夹中的文件，而不是通过 symfony 路由
• project.dev为开发环境使用不同的主机名（即）app_dev.php作为目录索引导致 url 没有/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 collectionsin config.yml ( cleaner templates, more control over assets )
• guard/ grunttaskrunners instead of assetic:dump --watch( re-dump on change but test and optimize aswell )
• source-mapsand 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 )

• 本地通配符 dns 服务器引入自动生成的 url，如project.devproject.prod，...（没/app_dev.php/问题）
• 在 config.yml 中创建资产集合（更干净的模板，对资产的更多控制）
• 守卫/ grunttaskrunners而不是assetic:dump --watch（重新转储更改但也要测试和优化）
• source-maps和 chrome-devtools 而不是 assetic assetic:dump --debug（查看合并文件的真实源文件，less,sass,coffeescript, ...）
• tincr（直接从 devtools 保存）和 livereload（立即查看更改）