如何在 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="%7B%7B%20asset_url%20%7D%7D" rel="stylesheet" type="text/css">
{% endstylesheets %}

{% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
    <link href="%7B%7B%20asset_url%20%7D%7D" 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中文網其他相關文章！