Symfony2 - Assetic - 在 CSS 中加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7044631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Symfony2 - Assetic - load images in CSS
提问by LBridge
I have a CoreBundle that contains main css files and images. Now I have a problem when I load an image from css; the image isn't shown.
我有一个包含主要 css 文件和图像的 CoreBundle。现在我从 css 加载图像时遇到问题；图像未显示。
background-image:url(../images/file.png)
(with a full path it works)
（使用完整路径可以工作）
I installed the assets using the command: assets:install weband i can see the image and css files under web/bundles/cmtcore/(css|images).
我使用命令安装了资产：assets:install web我可以在web/bundles/cmtcore/(css|images).
Here's the file structure inside the core bundle:
这是核心包内的文件结构：
/CoreBundle
/Resources
/public
/css
/main.css
/images
/file.png
And here's how I load the css file into the template:
这是我将 css 文件加载到模板中的方法：
{% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
Thank you for your help in advance.
提前谢谢你的帮助。
采纳答案by Inoryy
use the cssrewritefilter from Assetic bundle
使用cssrewriteAssetic 包中的过滤器
In config.yml:
在 config.yml 中：
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
And then call your stylesheets like this:
然后像这样调用你的样式表：
{% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
Oh and don't forget to use php app/console assetic:dump
哦，别忘了使用 php app/console assetic:dump
回答by user257980
There was few issues with ccsrewrite:
ccsrewrite 几乎没有问题：
the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.
在 AsseticBundle 中使用 @MyBundle 语法引用资产时，CssRewrite 过滤器不起作用。这是一个已知的限制。
Here is php version for 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; ?>
回答by Yann
I solved the problem by following the instructions on this site: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/
我按照本网站上的说明解决了这个问题：http: //www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/
The actual problem is that you reference your bundle resources absolute, but must reference them relative.
实际问题是您绝对引用您的包资源，但必须相对引用它们。
{% stylesheets filter='cssrewrite' output='css/*.css'
'bundles/blistercarerisikobewertung/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Clear your cache and install your assets again
清除缓存并重新安装资产
回答by tystr
Regarding Yann's answer, actually you don't have to re-install assets after every change if you use the --symlinkoption.
关于 Yann 的回答，如果您使用该--symlink选项，实际上您不必在每次更改后重新安装资产。
Note, however, that running the vendors install script will overwrite the symlinks, so you'll need to delete the bundles/*folders and install the assets with the --symlinkoption again after running the vendors script.
但是请注意，运行供应商安装脚本将覆盖符号链接，因此您需要删除bundles/*文件夹并--symlink在运行供应商脚本后再次使用该选项安装资产。
回答by fkrauthan
I have developed a small bundle with a extra filter to solve this issue. You can find it on github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git
我开发了一个带有额外过滤器的小包来解决这个问题。你可以在 github 上找到它：https: //github.com/fkrauthan/FkrCssURLRewriteBundle.git
With this bundle the @Notation for assetic works if you have relativ paths in your css file.
有了这个包，如果你的 css 文件中有相对路径，资产的 @Notation 就可以工作了。
回答by Matt Davis
I solved this using htaccess:
我使用 htaccess 解决了这个问题：
My assets are stored in src/Datacode/BudgetBundle/Resources/public/(css|img|js) and the assetic output parameter is set to write to: bundles/datacodebudget/css/styles.css (in web directory)
我的资产存储在 src/Datacode/BudgetBundle/Resources/public/(css|img|js) 并且资产输出参数设置为写入：bundles/datacodebudget/css/styles.css（在 web 目录中）
In my css i use the relative path ../ to reference images.
在我的 css 中，我使用相对路径 ../ 来引用图像。
Here is the .htaccess rule:
这是 .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/(.*)$ ///img/ [L]
My css is loaded as follows:
我的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 %}
In my config.yml file i have:
在我的 config.yml 文件中，我有：
assetic:
use_controller: true
Which (without the htaccess rewrite) causes the images not to load since the relative path for the image is at app_dev.php/bundles/datacodebudget/img/someimage.jpg. Using the cssrewrite filter doesn't work either because then it rewrites ../img to ../../../../Resources/public/img/ which resolves to Resources/public/img.
这（没有 htaccess 重写）导致图像无法加载，因为图像的相对路径位于 app_dev.php/bundles/datacodebudget/img/someimage.jpg。使用 cssrewrite 过滤器也不起作用，因为它会将 ../img 重写为 ../../../../Resources/public/img/，后者解析为 Resources/public/img。
By using the htaccess method the images load fine and I only need to run assetic:dump / assets:install when i add new images or want to push changes to production.
通过使用 htaccess 方法，图像加载得很好，当我添加新图像或想要将更改推送到生产时，我只需要运行 assetic:dump / assets:install 。
回答by yura
I solved this issue by permanently creating 'images' folder with images inside in 'symfony_root/web/' folder. Result: 'symfony_root/web/images/' - and it becomes work great!
我通过在“symfony_root/web/”文件夹中永久创建带有图像的“images”文件夹解决了这个问题。结果：'symfony_root/web/images/' - 它变得很好用！
回答by adavea
I have a similar problem, and I've looked around for at least a day, and I'm not convinced there's a good practical solution to this problem. I recommend using Assetic to handle javascript and css, and then just putting your images in the docroot of your web site. For example, if you have a css file that references ../images/file.png, just create and images folder under your docroot and put file.png in there. This is definitely not the best theoretical solution, but it's the only one I could find that actually works.
我有一个类似的问题，我环顾四周至少一天，我不相信有一个很好的实用解决方案来解决这个问题。我推荐使用 Assetic 来处理 javascript 和 css，然后把你的图片放在你网站的 docroot 中。例如，如果您有一个引用 ../images/file.png 的 css 文件，只需在您的 docroot 下创建和 images 文件夹并将 file.png 放在那里。这绝对不是最好的理论解决方案，但它是我能找到的唯一一个真正有效的解决方案。
回答by LBridge
I "solved" this by loading the css file differently:
我通过以不同的方式加载 css 文件来“解决”这个问题：
<link rel="stylesheet" href="{{ asset('bundles/cmtcore/css/main.css') }}" type="text/css" media="all" />
This is the way it is done in Acme/DemoBundle.
这是在 Acme/DemoBundle 中完成的方式。
I'll leave this question unsolved because this seems silly.
我不会解决这个问题，因为这看起来很愚蠢。
