symfony2前台範本中css導入後背景圖片不顯示

Question

symfony2管理css後，css定義有背景圖片，symfony2改變了css的路徑，卻沒有改變css內定義的背景圖片的路徑，導致背景圖片無法顯示，怎麼辦？先謝謝大家了！

Answer 1

如果你是使用的 Assetic 的話，那麼你需要加入 cssrewrite fileter，即：

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}

這個過濾器是什麼意思呢？

在你assets:dump（或assets:install） 的時候，Symfony2 會將你的靜態檔案（CSS）從Bundle 移出到Web 根目錄，因此有些檔案的路徑就改變了（例如在css中引用的圖像），從而導致了主題所說的問題。

因此 cssrewrite 濾鏡就是專門用來計算 css 與圖片之間的相對關係，並直接更新 CSS 中的路徑。

跟你舉個實際應用中的例子，你現在有兩個檔案 logo.png 和 style.css：

/src/AppBundle/Resources/public/img/logo.png
/src/AppBundle/Resources/public/css/style.css

你在 style.css 裡引用 logo.png 需要 ../img/logo.png，對吧？

現在，當你assets:dump 時，Symfony2 的Assetic 元件會將logo.png 和style.css 匯出到/web 目錄，因為/src 下是不能直接存取的，現在logo.png 和style.css 將會被匯出在新目錄：

/web/bundles/app/img/logo.png
/web/css/11e4a17.css

你會看到，11e4a17.css（style.css 被重新命名後的檔案） 和logo.png 的相對關係已經發生了變化，原先的../img/logo.png 已經不能引用到logo.png 了，cssrewrite 的意義就在於，它將更新11e4a17.css（style.css）中的../img/logo.png 為../bundles/app/img/logo.png。

囉嗦說這麼多，希望能幫到題主。

Answer 2

你可能沒看文件吧，送你
How to Use Assetic for Asset Management