Question

我正在使用Symfony 2.3.25，并且我是一个非常新的框架我通过我的apache配置将symfony带到了开发环境。我遇到的问题是在CSS中引用图像以正确加载。我使用Symfony附带的默认AppBundle。

我的文件结构如下：

symfony_root/
  app/
    Resources/
      public/
        css/
          style.scss
        js/
          script.js
        images/
          masthead-4.jpg

我将源文件存储在symfony_root / app / Resources / public中，然后让Assetic编译它们并输出到symfony_root / web /。这在我的Assetic配置中发生，如下所示：

symfony_root /应用/配置/ config.yml

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    #java: /usr/bin/java
    read_from:      %kernel.root_dir%/Resources/public/
    write_to:       %kernel.root_dir%/../web/
    filters:
        cssrewrite: ~
        sass: 
            apply_to: "\.scss$"
            bin: path_to_sass_which_works
        #closure:
        #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
        #yui_css:
        #    jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/javascripts/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/stylesheets/_bootstrap.scss
            filters: [cssrewrite]

现在在我的layout.twig文件中，根据我的理解，它采用此处定义的css文件，通过此处或config.yml中定义的过滤器运行它们，并将文件输出到web目录。我有以下内容：

symfony_root /应用/资源/视图/ layout.html.twig

{% stylesheets output='css/application.css'
  'css/style.css.scss'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

最后，在我的style.css.scss文件中，我有以下有问题的行：

.is--site_landing {
  background: transparent image-url('../images/masthead-4.jpg') top center no-repeat;
  background-size: cover;
}

未在浏览器中找到并显示css中的image-url。我已经尝试将css中的url更改为许多不同的路径。

/images/masthead-4.jpg

/images/masthead-4.jpg

../图像/标头-4.JPG

../images/masthead-4.jpg

标头-4.JPG

enter image description here

我还尝试在layout.html.twig文件中包含样式表时添加cssrewrite过滤器，但它会将css更改为错误的路径，例如：

 {% stylesheets filter='cssrewrite' output='css/application.css'
      'css/style.css.scss'
    %}

enter image description here

最后，如果我将masthead-4.jpg图像放在web / images / masthead-4.jpg中，我可以通过URL导航到图像并且它可以正常工作。此外，Symfony引用的普通图像标记中包含的任何图像都能正常工作。它只包含CSS中未正确引用的图像。

这有效：

      {% image 'images/masthead-4.jpg' %}
        <img class="img-circle hidden-xs" alt="Pass Rates" width="80" src="{{ asset_url }}" alt="Example" />
      {% endimage %}

谢谢，任何帮助将不胜感激。

Answer 1

您缺少的是cssrewrite过滤器。此外，您的CSS文件的路径看起来有点奇怪。尝试类似（在layout.html.twig）

中的内容

{% stylesheets output='bundles/app/css/application.css'
  'bundles/app/css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

检查this以获取更多详细信息

默认AppBundle中的CSS图像路径出现问题

1 个答案: