首页 > symfony2前台模板中css导入后背景图片不显示

symfony2前台模板中css导入后背景图片不显示

symfony2管理css后,css中定义有背景图片,symfony2改变了css的路径,却没有改变css内定义的背景图片的路径,导致背景图片无法显示,怎么办?先谢谢大家了!


你可能没有看文档吧,送你
How to Use Assetic for Asset Management


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

啰嗦说这么多,希望能帮到题主。

【热门文章】
【热门文章】