如何在 Symfony 2 项目中引用 CSS 文件中的图像？

在 Symfony 2 中导航 CSS 文件中的图像路径

问题：

您有包含图像路径的 CSS 文件，字体和其他资产。您的文件结构如下：

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...

您想在样式表中引用您的图像，但各种解决方案已证明存在问题。

修订的解决方案：

1.分为“公共”和“私有”目录：

将原始 CSS 文件存储在私有目录中（例如 src/Common/DirtyBundle/Resources/assets/css）。在运行 assetic:dump 之前将这些文件复制到公共目录中（例如 web/bundles/commondirty/css_original）。

2.使用Assetic“cssrewrite”过滤器（可选）：

此过滤器不是绝对必要的，但它可以简化路径操作。如果使用，请务必相应调整语法。

3.与 Twig 集成：

在您的 Twig 模板中，使用适当的目录和过滤器引用 CSS 文件：

{% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

{% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

4.处理图像路径：

根据配置使用相对或绝对路径来引用图像。例如：

• 相对路径：url("../bundles/commondirty/images/devil.png")
• 绝对路径：url("/bundles/commondirty/images /devil.png")

5.维护：

使用 assetic:dump 生成组合 CSS 文件后，如果需要，您可以从公共目录中删除原始 CSS 文件。

6.其余限制：

• 图像必须存储在公共目录（例如 web/bundles/commondirty/images）中才能访问。
• asset() 函数将不再适用于私有目录中的原始资产。

以上是如何在 Symfony 2 项目中引用 CSS 文件中的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！