3

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

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

图片 web/img/glyphicons-halflings.png 是指向 ../../vendor/twitter/bootstrap/img/glyphicons-halflings.png 的符号链接

我得到这个错误

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

并获得图像

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

更新

我以这种方式包含引导程序：

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

当我在产品中使用时，这有效

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

我有这个资产配置：

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

我也尝试过创建我的收藏：

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

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

4

1 回答 1

12

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 %}

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

基本信息

用于 ie for的cssrewritebackground-image: url("..")过滤器与 - 语法不兼容@Bundle。

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

不起作用。

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

你应该记住...

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

... will forhostname/app_dev.php/和除hostname/.

解决方案：

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

其他解决方案和提示

  • asset()当您的页面中包含 img、css 或 js 时，请始终使用 twig's{% 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/

您可以在此问题的答案中找到有关此主题的一些有用信息。

我的个人工作流程：

  • 本地通配符 dns 服务器引入自动生成的 url project.dev，如 project.prod ......（没/app_dev.php/问题）
  • 在 config.yml 中创建资产集合（更简洁的模板，对资产的更多控制）
  • 守卫/咕哝任务运行者，而不是assetic:dump --watch（重新转储更改，但也测试和优化）
  • source-maps和 chrome-devtools 而不是assetic的assetic:dump --debug（查看组合文件的真实源文件，less，sass，coffeescript，...）
  • tincr（直接从 devtools 保存）和 livereload（立即查看更改）
于 2013-06-16T00:05:51.843 回答