Maison >interface Web >tutoriel CSS >Comment référencer des images dans des fichiers CSS au sein d'un projet Symfony 2 ?

Comment référencer des images dans des fichiers CSS au sein d'un projet Symfony 2 ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-17 21:26:02625parcourir

How do you reference images in CSS files within a Symfony 2 project?

Navigation des chemins d'images dans les fichiers CSS dans Symfony 2

Problème :

Vous avez des fichiers CSS contenant des chemins d'accès aux images, polices et autres actifs. La structure de votre fichier est la suivante :

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...

Vous souhaitez référencer vos images dans la feuille de style, mais diverses solutions se sont avérées problématiques.

Solution révisée :

1. Divisé en répertoires « Public » et « Privé » :

Stockez vos fichiers CSS d'origine dans un répertoire privé (par exemple, src/Common/DirtyBundle/Resources/assets/css). Copiez ces fichiers dans un répertoire public avant d'exécuter Assetic:dump (par exemple, web/bundles/commondirty/css_original).

2. Utiliser le filtre Assetic "cssrewrite" (Facultatif) :

Ce filtre n'est pas strictement nécessaire, mais il peut simplifier la manipulation du chemin. Si vous l'utilisez, assurez-vous d'ajuster la syntaxe en conséquence.

3. Intégrez avec Twig :

Dans votre modèle Twig, référencez les fichiers CSS à l'aide des répertoires et filtres appropriés :

{% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

{% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

4. Gérer les chemins d'image :

Utilisez des chemins relatifs ou absolus pour référencer des images en fonction de la configuration. Par exemple :

  • Chemin relatif : url("../bundles/commondirty/images/devil.png")
  • Chemin absolu : url("/bundles/commondirty/images /devil.png")

5. Maintenance :

Après avoir généré le fichier CSS combiné à l'aide d'assetic:dump, vous pouvez supprimer les fichiers CSS d'origine du répertoire public si vous le souhaitez.

6. Contraintes restantes :

  • Les images doivent être stockées dans un répertoire public (par exemple, web/bundles/commondirty/images) pour être accessibles.
  • La fonction Asset() sera ne fonctionne plus pour les actifs d'origine dans le répertoire privé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn