Symfony2 - Assetic - 在 CSS 中加载图像

Question

我有一个包含主要 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 %}

提前感谢您的帮助。

Answer 1

我通过以不同方式加载 css 文件“解决了”这个问题：

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

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

我将留下这个问题未解决，因为这看起来很愚蠢。

Answer 2

使用 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

Answer 3

我按照这个网站上的说明解决了这个问题： 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 %}

清除缓存并重新安装资源

Answer 4

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

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

Answer 5

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; ?>

Answer 6

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

Answer 7

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

如果您的 css 文件中有相对路径，则使用此捆绑包，资产的 @Notation 可以工作。

Answer 8

我使用 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 方法，图像可以正常加载，当我添加新图像或想要将更改推送到生产环境时，我只需要运行 assets:dump / assets:install。

Answer 9

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