Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie verweisen Sie auf Bilder in CSS-Dateien innerhalb eines Symfony 2-Projekts?

Barbara Streisand
Freigeben: 2024-11-17 21:26:02
Original
526 Leute haben es durchsucht

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

Navigieren durch Bildpfade in CSS-Dateien in Symfony 2

Problem:

Sie haben CSS-Dateien, die Pfade zu Bildern enthalten, Schriftarten und andere Assets. Ihre Dateistruktur ist wie folgt:

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...
Nach dem Login kopieren

Sie möchten Ihre Bilder im Stylesheet referenzieren, aber verschiedene Lösungen haben sich als problematisch erwiesen.

Überarbeitete Lösung:

1. In „Öffentliche“ und „Private“ Verzeichnisse aufteilen:

Speichern Sie Ihre ursprünglichen CSS-Dateien in einem privaten Verzeichnis (z. B. src/Common/DirtyBundle/Resources/assets/css). Kopieren Sie diese Dateien in ein öffentliches Verzeichnis, bevor Sie assetic:dump ausführen (z. B. web/bundles/commondirty/css_original).

2. Verwenden Sie den Assetic-Filter „cssrewrite“ (optional):

Dieser Filter ist nicht unbedingt erforderlich, kann aber die Pfadmanipulation vereinfachen. Passen Sie bei Verwendung unbedingt die Syntax entsprechend an.

3. Mit Twig integrieren:

Referenzieren Sie in Ihrer Twig-Vorlage die CSS-Dateien mithilfe der entsprechenden Verzeichnisse und Filter:

{% 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 %}
Nach dem Login kopieren

4. Behandeln Sie Bildpfade:

Verwenden Sie je nach Konfiguration relative oder absolute Pfade, um Bilder zu referenzieren. Zum Beispiel:

  • Relativer Pfad: url("../bundles/commondirty/images/devil.png")
  • Absoluter Pfad: url("/bundles/commondirty/images /devil.png")

5. Wartung:

Nachdem Sie die kombinierte CSS-Datei mit assetic:dump generiert haben, können Sie bei Bedarf die ursprünglichen CSS-Dateien aus dem öffentlichen Verzeichnis löschen.

6. Verbleibende Einschränkungen:

  • Bilder müssen in einem öffentlichen Verzeichnis (z. B. web/bundles/commondirty/images) gespeichert werden, um zugänglich zu sein.
  • Die Funktion asset() wird Funktioniert nicht mehr für Original-Assets im privaten Verzeichnis.

Das obige ist der detaillierte Inhalt vonWie verweisen Sie auf Bilder in CSS-Dateien innerhalb eines Symfony 2-Projekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage