wake-up-neo.com

Symfony2 - Assetic - Bilder in CSS laden

Ich habe ein CoreBundle, das die wichtigsten CSS-Dateien und Bilder enthält. Jetzt habe ich ein Problem, wenn ich ein Bild von css lade. Das Bild wird nicht angezeigt.

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

(mit einem vollständigen Pfad funktioniert es)

Ich habe die Assets mit dem Befehl installiert: assets:install web und ich kann die Image- und CSS-Dateien unter web/bundles/cmtcore/(css|images) sehen.

Hier ist die Dateistruktur im Kernpaket:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

Und so lade ich die CSS-Datei in die Vorlage:

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

Danke im Voraus für Ihre Hilfe.

cssimagebackground-imagesymfonyassets
59
LBridge

verwenden Sie den cssrewrite-Filter aus dem Assetic-Bundle

In config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

Und dann nennen Sie Ihre Stylesheets so:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Oh, und vergiss nicht, php app/console assetic:dump zu verwenden.

54
Inoryy

Es gab wenige Probleme mit ccsrewrite:

Der CssRewrite-Filter funktioniert nicht, wenn Sie in AsseticBundle die @ MyBundle-Syntax verwenden, um auf die Assets zu verweisen. Dies ist eine bekannte Einschränkung.

Hier ist PHP-Version für 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; ?>
17
user257980

Ich habe das Problem durch Befolgen der Anweisungen auf dieser Website gelöst: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Das eigentliche Problem ist, dass Sie absolut auf Ihre Bündelressourcen verweisen, diese jedoch relativ angeben müssen.

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

Leeren Sie den Cache und installieren Sie Ihre Assets erneut

13
Yann

Ich habe ein kleines Paket mit einem zusätzlichen Filter entwickelt, um dieses Problem zu lösen. Sie finden es auf github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Mit diesem Bundle funktioniert die @Notation für Assetic, wenn Sie relative Pfade in Ihrer CSS-Datei haben.

6
fkrauthan

In Bezug auf die Antwort von Yann müssen Sie Assets nach jeder Änderung nicht neu installieren, wenn Sie die --symlink-Option verwenden.

Beachten Sie jedoch, dass beim Ausführen des Hersteller-Installationsskripts die Symlinks überschrieben werden. Sie müssen daher die Ordner bundles/* löschen und die Assets mit der Option --symlink erneut installieren, nachdem Sie das Anbieterskript ausgeführt haben.

6
tystr

Ich habe dieses Problem behoben, indem der Ordner "images" mit Bildern im Ordner "symfony_root/web /" dauerhaft erstellt wurde. Ergebnis: 'symfony_root/web/images /' - und es wird großartig!

1
yura

Ich habe das mit htaccess gelöst:

Meine Assets werden in src/Datacode/BudgetBundle/Resources/public/(css | img | js) gespeichert, und der assetic-Ausgabeparameter ist so eingestellt, dass Folgendes geschrieben wird: bundles/datacodebudget/css/styles.css (im Webverzeichnis)

In meiner CSS verwende ich den relativen Pfad ../, um Bilder zu referenzieren.

Hier ist die .htaccess-Regel:

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

Meine CSS wird wie folgt geladen:

{% 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 meiner config.yml-Datei habe ich:

assetic:
    use_controller: true

Dies führt (ohne htaccess rewrite) dazu, dass die Bilder nicht geladen werden, da der relative Pfad für das Bild unter app_dev.php/bundles/datacodebudget/img/someimage.jpg liegt. Die Verwendung des cssrewrite-Filters funktioniert auch nicht, da er ../img in ../../../../Resources/public/img/ umschreibt, was in Resources/public/img aufgelöst wird.

Durch die Verwendung der htaccess-Methode werden die Images gut geladen, und ich muss nur assetic ausführen: dump/assets: Installieren, wenn ich neue Images hinzufüge oder Änderungen in die Produktion übernehmen möchte.

1
Matt Davis

Ich habe ein ähnliches Problem und habe mich mindestens einen Tag lang umgesehen und bin nicht überzeugt, dass es eine praktische Lösung für dieses Problem gibt. Ich empfehle die Verwendung von Assetic, um mit Javascript und CSS umzugehen, und dann Ihre Bilder einfach in den Docroot Ihrer Website zu stellen. Wenn Sie beispielsweise über eine CSS-Datei verfügen, die auf ../images/file.png verweist, erstellen Sie einfach einen images-Ordner unter Ihrem docroot und fügen Sie dort die Datei file.png ein. Dies ist definitiv nicht die beste theoretische Lösung, aber es ist die einzige, die ich finden konnte, die tatsächlich funktioniert.

0
adavea