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
Libérer: 2024-11-17 21:26:02
original
623 Les gens l'ont consulté

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...
...
Copier après la connexion

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 %}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal