Symfony2 – Assetic – carica le immagini in CSS

Ho un CoreBundle che contiene i file e le 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 le risorse usando il comando: assets:install web e posso vedere l’immagine e i file css sotto web/bundles/cmtcore/(css|images) .

Ecco la struttura dei file all’interno del pacchetto principale:

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

Ed ecco come caricare il file css nel modello:

  {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}  {% endstylesheets %} 

Grazie in anticipo per il tuo aiuto.

usa il filtro cssrewrite dal bundle Assetic

In config.yml:

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

E poi chiama i tuoi fogli di stile in questo modo:

  {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}  {% endstylesheets %} 

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

Ci sono stati alcuni problemi con ccsrewrite:

il filtro CssRewrite non funziona quando si utilizza la syntax @MyBundle in AsseticBundle per fare riferimento alle risorse. Questa è una limitazione nota.

Ecco la versione php per cssrewrite:

 stylesheets(array( 'bundles/test/css/foundation/foundation.css', 'bundles/test/css/foundation/app.css', 'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url): ?>   

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/*' %}  {% endstylesheets %} 

Svuota la cache e installa nuovamente le risorse

Per quanto riguarda la risposta di Yann, in realtà non è necessario reinstallare le risorse dopo ogni modifica se si utilizza l’opzione --symlink .

Si noti, tuttavia, che l’esecuzione dello script di installazione dei fornitori sovrascriverà i collegamenti simbolici, quindi sarà necessario eliminare le cartelle bundles/* e installare nuovamente le risorse con l’opzione --symlink dopo aver eseguito lo script dei fornitori.

Ho sviluppato un piccolo pacchetto con un filtro extra 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.

Ho risolto questo problema usando htaccess:

I miei asset sono memorizzati in src / Datacode / BudgetBundle / Resources / public / (css | img | js) e il parametro di output assetico è impostato per scrivere in: bundles / datacodebudget / css / styles.css (nella directory web)

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

Ecco la regola .htaccess:

 # Make image path work on dev # ie /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] 

Il mio css è caricato come segue:

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

Nel mio file config.yml ho:

 assetic: use_controller: true 

Il quale (senza la riscrittura htaccess) non carica le immagini poiché il percorso relativo per l’immagine è in app_dev.php / bundles / datacodebudget / img / someimage.jpg. L’uso del filtro cssrewrite non funziona o perché riscrive ../img in ../../../../Resources/public/img/ che risolve in Resources / public / img.

Usando il metodo htaccess le immagini si caricano bene e ho solo bisogno di eseguire assetic: dump / assets: installa quando aggiungo nuove immagini o vuoi spingere le modifiche alla produzione.

Ho risolto questo problema creando in modo permanente la cartella “images” con immagini all’interno della cartella “symfony_root / web /”. Risultato: ‘symfony_root / web / images /’ – e diventa un grande lavoro!

Ho un problema simile, e mi sono guardato attorno per almeno un giorno, e non sono convinto che 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.

Ho “risolto” questo caricando il file css in modo diverso:

  

Questo è il modo in cui è fatto in Acme / DemoBundle.

Lascerò questa domanda irrisolta perché questo sembra sciocco.