Symfony2 - Assetic - carica immagini in CSS

Question

Ho un CoreBundle che contiene file e immagini css principali. Ora ho un problema quando carico un'immagine da css; l'immagine non è mostrata.

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

(con un percorso completo funziona)

ho installato i beni con il comando: assets:install web e posso vedere i file di immagine e css sotto web/bundles/cmtcore/(css|images).

Ecco la struttura dei file all'interno del bundle di base:

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

Ed ecco come si carica il file CSS nel modello:

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

Grazie per il vostro aiuto in anticipo.

Answer 1

utilizzare il filtro cssrewrite da Assetic fascio

In config.yml:

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

e quindi chiamare i tuoi fogli di stile come questo:

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

Oh, e non dimenticare di usare php app/console assetic:dump

Answer 2

I "risolto" questo caricando il file css in modo diverso:

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

questo è il modo si è fatto in Acme/DemoBundle.

Lascerò questa domanda irrisolta perché questo sembra sciocco.

Answer 3

Ho risolto il problema seguendo le istruzioni su questo sito: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Il vero problema è che si fa riferimento alle risorse del bundle in modo assoluto, ma devono fare riferimento a esse in relazione.

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

svuotare la cache ed installare il vostro patrimonio di nuovo

Answer 4

Per quanto riguarda la risposta di Yann, in realtà non c'è bisogno di reinstallare le attività dopo ogni modifica, se si utilizza l'opzione --symlink.

Si noti, tuttavia, che l'esecuzione i venditori script di installazione sovrascrive i link simbolici, quindi avrete bisogno di eliminare i bundles/* cartelle e installare i beni con l'opzione --symlink di nuovo dopo l'esecuzione dello script fornitori.

Answer 5

C'era alcuni problemi con ccsrewrite:

il filtro CssRewrite non funziona quando si utilizza la sintassi @MyBundle in AsseticBundle per fare riferimento ai beni. Questa è una limitazione nota.

Ecco versione di PHP per 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; ?> 

Answer 6

Ho un problema simile, e ho guardato intorno per almeno un giorno, e io non sono convinto ci sia una buona soluzione pratica a questo problema. Raccomando di usare Assetic per gestire javascript e css, e quindi semplicemente mettendo le tue immagini nella docroot del tuo sito web. Ad esempio, se hai un file css che fa riferimento a ../images/file.png, crea semplicemente una cartella di immagini sotto la tua docroot e metti file.png lì. Questa non è sicuramente la migliore soluzione teorica, ma è l'unica che ho trovato che funzioni davvero.

Answer 7

Ho sviluppato un piccolo pacchetto con un filtro aggiuntivo per risolvere questo problema. Puoi trovarlo su github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Con questo pacchetto, @Notation per assetic funziona se hai percorsi relativ nel tuo file css.

Answer 8

Ho risolto questo usando .htaccess:

Le mie attività sono memorizzati in src/Datacode/BudgetBundle/Resources/public/(css | img | js) e il parametro di uscita Assetic è impostato per scrivere a: pacchi/datacodebudget /css/styles.css (nella directory web)

Nel mio css uso il percorso relativo ../ per fare riferimento alle immagini.

Ecco la regola .htaccess:

mio css viene caricato nel modo seguente:

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

Nel mio file config.yml ho:

assetic: 
    use_controller: true 

Quale (senza la riscrittura htaccess) fa sì che le immagini non vengano caricate poiché il percorso relativo per l'immagine è in app_dev.php/bundles/datacodebudget/i mg/someimage.jpg. L'uso del filtro cssrewrite non funziona o perché riscrive ../img in ../../../../Resources/public/img/ che risolve in Resources/public/img.

Utilizzando il metodo htaccess, le immagini vengono caricate correttamente e ho solo bisogno di eseguire assetic: dump/assets: installa quando aggiungo nuove immagini o voglio apportare modifiche alla produzione.

Answer 9

Ho risolto questo problema creando permanentemente la cartella "images" con immagini all'interno della cartella "symfony_root/web /". Risultato: 'symfony_root/web/images /' - e diventa un grande lavoro!