Symfony2 - Assetic - 在CSS中加载图像

时间:2011-08-12 18:25:16

标签: css image background-image symfony assets

我有一个包含主要css文件和图像的CoreBundle。现在我从css加载图像时出现问题;图像未显示。

 background-image:url(../images/file.png)

(使用完整路径)

我使用命令assets:install web安装了资产,我可以在web/bundles/cmtcore/(css|images)下看到图片和css文件。

这是核心包内的文件结构:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

以下是我将css文件加载到模板中的方法:

 {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

提前感谢您的帮助。

9 个答案:

答案 0 :(得分:54)

使用Assetic捆绑包中的cssrewrite过滤器

在config.yml中:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

然后调用你的样式表:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

哦,别忘了使用php app/console assetic:dump

答案 1 :(得分:17)

ccsrewrite几乎没有问题:

使用AsseticBundle中的@MyBundle语法引用资产时,CssRewrite过滤器不起作用。这是一个已知的限制。

这是cssrewrite的php版本:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

答案 2 :(得分:13)

我按照本网站上的说明解决了这个问题: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

实际问题是您引用了bundle资源的绝对值,但必须相对引用它们。

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

清除缓存并重新安装资产

答案 3 :(得分:6)

关于Yann的回答,如果您使用--symlink选项,实际上您不必在每次更改后重新安装资产。

但请注意,运行供应商安装脚本将覆盖符号链接,因此您需要删除bundles/*文件夹,并在运行供应商脚本后再次使用--symlink选项安装资产

答案 4 :(得分:6)

我开发了一个带有额外过滤器的小捆绑来解决这个问题。你可以在github上找到它:https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

如果您的css文件中有相对路径,则使用此捆绑包可以使用@Notation for assetic。

答案 5 :(得分:1)

我用htaccess解决了这个问题:

我的资产存储在src / Datacode / BudgetBundle / Resources / public /(css | img | js)中,资产输出参数设置为写入:bundles / datacodebudget / css / styles.css(在web目录中)

在我的CSS中,我使用相对路径../来引用图像。

这是.htaccess规则:

# Make image path work on dev
# i.e. /app_dev.php/bundles/datacodebudget/img/glyphicons-halflings-white.png rewrites to /bundles/datacodebudget/img/glyphicons-halflings-white.png
RewriteRule ^app_dev\.php/(.*)/(.*)/img/(.*)$ /$1/$2/img/$3 [L]

我的css加载如下:

{% stylesheets
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap.css'
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap-responsive.css'
    '@DatacodeBudgetBundle/Resources/public/css/styles.css' 
    '@DatacodeBudgetBundle/Resources/public/css/chosen.css' output="bundles/datacodebudget/css/styles.css"
%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

在我的config.yml文件中,我有:

assetic:
    use_controller: true

其中(没有htaccess重写)导致图像无法加载,因为图像的相对路径位于app_dev.php / bundles / datacodebudget / img / someimage.jpg。使用cssrewrite过滤器也不起作用,因为它将../img重写为../../../../Resources/public/img/,它解析为Resources / public / img。

通过使用htaccess方法,图像加载正常,我只需要运行assetic:dump / assets:当我添加新图像或想要将更改推送到生产时安装。

答案 6 :(得分:1)

我通过在'symfony_root / web /'文件夹中永久创建带有图像的'images'文件夹解决了这个问题。结果:'symfony_root / web / images /' - 它变得很棒!

答案 7 :(得分:0)

我有一个类似的问题,我至少看了一天,我不相信这个问题有一个很好的实际解决方案。我建议使用Assetic来处理javascript和css,然后将图像放在网站的docroot中。例如,如果您有一个引用../images/file.png的css文件,只需在您的docroot下创建并映像文件夹并将file.png放在那里。这绝对不是最好的理论解决方案,但它是我能找到的唯一可行的解​​决方案。

答案 8 :(得分:-1)

我通过以不同方式加载css文件来解决这个问题:

<link rel="stylesheet" href="{{ asset('bundles/cmtcore/css/main.css') }}" type="text/css" media="all" />

这是在Acme / DemoBundle中完成的方式。

我会留下这个问题未解决,因为这看起来很傻。