Symfony2 - Assetic - 在 CSS 中加载图像

Posted 2023-03-06

【中文标题】Symfony2 - Assetic - 在 CSS 中加载图像

【英文标题】：Symfony2 - Assetic - load images in CSS

【发布时间】：2011-10-26 01:20:26

【问题描述】：

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

提前感谢您的帮助。

【问题讨论】：

我有同样的问题。试图通过图像文件夹到 css 来解决它，但这没有用

【参考方案1】：

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

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

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

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

【讨论】：

此方法有效，但它不使用资产包来加载样式表，这意味着您不能添加像 yui_css 这样的酷过滤器。

【参考方案2】：

使用 Assetic 捆绑包中的 cs-s-rewrite 过滤器

在 config.yml 中：

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cs-s-rewrite: ~

然后像这样调用你的样式表：

 % stylesheets 'bundles/cmtcore/css/*' filter='cs-s-rewrite' %
        <link rel="stylesheet" type="text/css" media="screen" href=" asset_url " />
 % endstylesheets %

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

【讨论】：

我对这个解决方案的问题是 symfony 试图在 /Resources/public/css/* 上找到图像，而它应该寻找 /bundles/mybundle/images/ ...关于此的任何想法一个？

cs-s-rewrite 用于重写 css 中图像的路径。它不“寻找图像”，它甚至不知道图像是什么。

好的，cs-s-rewrite 正在将我的图像路径重写为 /Resources/public/css/* 何时应该将其重写为 /bundles/mybundle/images/ 你知道改变的方法吗在 cs-s-rewrite 中？

Inor - 使用默认的资产配置（这是您在上面使用的）我遇到了与 Clint 相同的问题。 css 和 js 文件很好，但在 css 文件中，它会在“../../Resources/Public/css/img”中查找图像，而它应该在“bundle/bundlename/img”中查找？

然后真正的问题就出来了……资产的限制。 github.com/kriswallsmith/assetic/issues/53

【参考方案3】：

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

实际的问题是你绝对引用你的包资源，但必须相对引用它们。

% stylesheets filter='cs-s-rewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %
    <link href=" asset_url " type="text/css" rel="stylesheet" />
% endstylesheets %

清除缓存并重新安装资源

【讨论】：

您不必在每次更改后（甚至在开发环境中）使用此方法安装资产吗？我试试看。

@tobias，是的，我刚刚尝试过，您确实需要在每次更改后安装资产。哎呀。

这对我有用。我会在 web/bundles 中开发我的资产......然后在分发包时将它们复制回包中以提交

您可以像往常一样使用php app/console assets:install --symlink 来开发您的包中的文件，并且每次更改后都不需要安装它们

【参考方案4】：

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

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

【讨论】：

或者在 composer.json 中添加一个选项以使用 --symlink 代替（如果您使用的是 2.1+）

【参考方案5】：

ccsrewrite 的问题很少：

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

这里是cs-s-rewrite的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('cs-s-rewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

【参考方案6】：

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

【讨论】：

阅读 user257980 的回答和 Clint 评论。有一种方法可以做到这一点。

【参考方案7】：

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

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

【讨论】：

在没有真正理解您的代码的情况下，我不得不说它可以创造奇迹。非常感谢=)

【参考方案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。使用 cs-s-rewrite 过滤器也不起作用，因为它会将 ../img 重写为 ../../../../Resources/public/img/ 解析为 Resources/public/img。

通过使用 htaccess 方法，图像可以正常加载，当我添加新图像或想要将更改推送到生产环境时，我只需要运行 assets:dump / assets:install。

【参考方案9】：

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

【讨论】：

如果您打算与其他人共享您的捆绑包，建议您这样做。最好将资源保存在它们的包中。