Symfony2 – Assetic – carga imágenes en CSS

Tengo un CoreBundle que contiene archivos e imágenes principales de css. Ahora tengo un problema cuando cargo una imagen de css; la imagen no se muestra

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

(con un camino completo funciona)

Instalé los activos usando el comando: assets:install web y puedo ver la imagen y los archivos css en web/bundles/cmtcore/(css|images) .

Aquí está la estructura de archivos dentro del paquete principal:

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

Y así es como cargo el archivo css en la plantilla:

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

De forma anticipada, muchas gracias por su ayuda.

usa el filtro cssrewrite del paquete Assetic

En config.yml:

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

Y luego llame a sus hojas de estilo de esta manera:

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

Ah, y no olvides usar la php app/console assetic:dump

Hubo pocos problemas con ccsrewrite:

el filtro CssRewrite no funciona cuando se utiliza la syntax @MyBundle en AsseticBundle para hacer referencia a los activos. Esta es una limitación conocida.

Aquí está la versión de PHP para 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): ?>   

Resolví el problema siguiendo las instrucciones en este sitio: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

El problema real es que hace referencia absoluta a los recursos de su paquete, pero debe hacer referencia a ellos como relativos.

 {% stylesheets filter='cssrewrite' output='css/*.css' 'bundles/blistercarerisikobewertung/css/*' %}  {% endstylesheets %} 

Borre su caché e instale sus activos nuevamente

Con respecto a la respuesta de Yann, en realidad no tiene que volver a instalar los activos después de cada cambio si usa la opción --symlink .

Sin embargo, tenga en cuenta que la ejecución del script de instalación de los proveedores sobrescribirá los enlaces simbólicos, por lo que deberá eliminar los bundles/* carpetas e instalar los activos con la opción --symlink nuevamente después de ejecutar el script de proveedores.

He desarrollado un pequeño paquete con un filtro adicional para resolver este problema. Puede encontrarlo en github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Con este paquete, @Notation para assetic funciona si tienes rutas relativ en tu archivo css.

Lo resolví usando htaccess:

Mis activos se almacenan en src / Datacode / BudgetBundle / Resources / public / (css | img | js) y el parámetro de salida de assetic está configurado para escribir en: bundles / datacodebudget / css / styles.css (en el directorio web)

En mi css, uso la ruta relativa ../ para hacer referencia a las imágenes.

Aquí está la regla .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] 

Mi css se carga de la siguiente manera:

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

En mi archivo config.yml tengo:

 assetic: use_controller: true 

Lo cual (sin la reescritura de htaccess) hace que las imágenes no se carguen, ya que la ruta relativa de la imagen está en app_dev.php / bundles / datacodebudget / img / someimage.jpg. El uso del filtro cssrewrite tampoco funciona porque reescribe ../img a ../../../../Resources/public/img/ que se resuelve en Resources / public / img.

Al usar el método htaccess, las imágenes se cargan bien y solo necesito ejecutar assetic: dump / assets: instalar cuando agregue nuevas imágenes o quiero insertar cambios en la producción.

Resolví este problema creando permanentemente la carpeta ‘images’ con imágenes dentro de la carpeta ‘symfony_root / web /’. Resultado: ‘symfony_root / web / images /’ – ¡y se convierte en un gran trabajo!

Tengo un problema similar y he buscado por lo menos un día, y no estoy seguro de que haya una buena solución práctica para este problema. Recomiendo usar Assetic para manejar javascript y css, y luego poner sus imágenes en el docroot de su sitio web. Por ejemplo, si tiene un archivo css que hace referencia a ../images/file.png, solo cree la carpeta de imágenes debajo de su docroot y coloque file.png allí. Esta definitivamente no es la mejor solución teórica, pero es la única que pude encontrar que realmente funciona.

“Solucioné” esto cargando el archivo css de manera diferente:

  

Esta es la forma en que se hace en Acme / DemoBundle.

Dejaré esta pregunta sin resolver porque esto parece tonto.

    Intereting Posts