首頁  >  問答  >  主體

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

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

我想大声告诉你我想大声告诉你2734 天前649

全部回覆(2)我來回復

  • 淡淡烟草味

    淡淡烟草味2017-05-16 16:46:10

    如果你是使用的 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。

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

    回覆
    0
  • 怪我咯

    怪我咯2017-05-16 16:46:10

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

    回覆
    0
  • 取消回覆