logo标签列表

Symfony2 - Assetic - 在CSS中加载图片

cssimagebackground-imagesymfonyassets
59
我有一个CoreBundle，里面包含主要的CSS文件和图像。现在我有一个问题，当我从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 %}

非常感谢您的帮助。

我有同样的问题。尝试通过将图像文件夹添加到CSS中来解决它，但那并没有起作用。 - user257980
9个回答
54

使用 Assetic bundle 中的 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

13
我对这个解决方案的问题在于Symfony尝试在“/Resources/public/css/*”中查找图像，但它应该查找“/bundles/mybundle/images/”...你对此有什么想法吗？ - Clint
1
cssrewrite 用于重写 CSS 中的图像路径。它不会“查找图像”，甚至不知道什么是图像。 - Inoryy
10
好的，cssrewrite把我的图片路径重写成了/Resources/public/css/*，但它应该是重写成/bundles/mybundle/images/。你知道如何在cssrewrite中更改这个吗？ - Clint
8
使用默认的assetic配置（就像您上面使用的那样），我遇到了与Clint相同的问题。CSS和JS文件没问题，但是在CSS文件中，它会在“../../Resources/Public/css/img”中寻找图像，而应该在“bundle/bundlename/img”中寻找。 - Mr Pablo
1
然后真正的问题出现了...这是一个assetic的限制。https://github.com/kriswallsmith/assetic/issues/53 - Clint
显示剩余4条评论
16

ccsrewrite存在一些问题：

使用@MyBundle语法在AsseticBundle中引用资源时，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; ?>
13

我通过遵循这个网站的指导解决了问题：http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

实际问题在于你引用了绝对路径的捆绑资源，但必须使用相对路径进行引用。

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

清除缓存并重新安装您的资产

1
你难道不需要在每次修改后（即使是在开发环境中）安装资源文件吗？我会试一下的。 - LBridge
@tobias，是的，我刚试了一下，你确实需要在每次更改后安装资产。哎呀。 - Clint
这对我很有效。我会在web/bundles中开发我的资源... 然后当bundle需要分发时，将它们复制回bundle以提交。 - ivoba
1
你可以使用 php app/console assets:install --symlink 命令来像往常一样开发你的 bundle 内部文件，每次更改后都不需要重新安装它们。 - Ramy Nasr
6

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

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

或者在composer.json中添加一个选项来使用--symlink（如果您正在使用2.1+）。 - ChocoDeveloper
6
不太了解你的代码是如何运作的，但我必须说它非常出色。非常感谢你 =) - azzy81
1
我使用htaccess解决了这个问题：
我的资源存储在src/Datacode/BudgetBundle/Resources/public/(css|img|js)中，而assetic输出参数设置为写入到：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:install即可。

1
我通过在“symfony_root/web/”文件夹中永久创建带有图像的“images”文件夹来解决了这个问题。结果是：“symfony_root/web/images/”，它能够很好地工作！
如果您计划与他人共享捆绑包，那么这是错误的建议。最好将资源保留在它们的捆绑包中。 - k0pernikus
0

我有一个类似的问题，已经找了至少一天，我不确定是否有一个好的实际解决方案。我建议使用Assetic来处理JavaScript和CSS，然后将您的图像放在网站的docroot中。例如，如果您有一个引用../images/file.png的CSS文件，只需在docroot下创建一个images文件夹，并将file.png放在其中。这绝对不是最好的理论解决方案，但这是我能找到的唯一一个真正可行的解决方案。

阅读user257980的答案和Clint的评论。有一种正确的方法。 - ChocoDeveloper
-1
我通过不同的方式加载CSS文件来“解决”了这个问题：
<link rel="stylesheet" href="{{ asset('bundles/cmtcore/css/main.css') }}" type="text/css" media="all" />

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

我会把这个问题留着未解决，因为这似乎很愚蠢。

6
这种方法可行，但它没有使用Assetic Bundle来加载样式表，这意味着您无法添加像yui_css这样的炫酷滤镜。 - Clint
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接