Symfony2 - Assetic - load images in CSS

问题

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.

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

(with a full path it works)

I installed the assets using the command: assets:install web and i can see the image and css files under 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:

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

Thank you for your help in advance.

回答1:

use the cssrewrite filter from Assetic bundle

In 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

回答2:

There was few issues with ccsrewrite:

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

Here is php version for cssrewrite:

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

回答3:

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/

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

回答4:

Regarding Yann's answer, actually you don't have to re-install assets after every change if you use the --symlink option.

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 --symlink option again after running the vendors script.

回答5:

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

With this bundle the @Notation for assetic works if you have relativ paths in your css file.

回答6:

I solved this using 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)

In my css i use the relative path ../ to reference images.

Here is the .htaccess rule:

# 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]

My css is loaded as follows:

{% 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:

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.

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.

回答7:

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!

回答8:

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.

回答9:

I "solved" this by loading the css file differently:

<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.

I'll leave this question unsolved because this seems silly.

来源：https://stackoverflow.com/questions/7044631/symfony2-assetic-load-images-in-css

标签

css

image

background-image

symfony

assets