css - Assetic 不会将图像从 css 复制到网络路径

Question

我的 header.html.twig 中有以下 block

{% stylesheets filter='cssrewrite' '../src/SkaLab/Bundle/FrontEndBundle/Resources/public/css/styles.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

在我的 css 样式表中，我有以下几行:

.container.login {
    background:url('imgs/hand-tools-1.jpg');
}

在 config.yml 中:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ SkaLabFrontEndBundle ]
    filters:
        cssrewrite: ~

当我使用以下命令启动 assetic 时:

php app/console assetic:dump --env=dev

它在 web 目录中生成所有内容，但我不明白为什么背景 url 中的图像没有。任何人都可以帮助我吗？我怎样才能像其他资源(如 css 和 js)一样在 web 路径中找到背景 url 图像(来自 css 代码)？

Answer 1

首先，使用命令:

php app/console assets:install

这将在您的网络路径中生成 bundles 文件夹，并在其中生成您的图像。

如果你在你的 css 中放置一个相对路径，这将被解释为:yoursite.com/bundles/yourbundle/css

因此，如果您放入 imgs/hand-tools-1.jpg，symfony 将在下面的路径中查找 imgs 文件夹。

最好的方法是使用绝对路径。绝对路径的 / 是您的 web 目录(唯一一个公开的目录)。因此您可以通过以下方式更改图片路径:

.container.login {
    background:url('/./yourPathToImgsFolderInWeb/imgs/hand-tools-1.jpg');
}

例如:如果你有这样的结构:

web
   css
   bundles
       appbundle
           imgs
               hand-tools-1.jpg

因此，您必须将 yourPathToImgsFolderInWeb 替换为 bundles/appbundle