ホームページ >ウェブフロントエンド >CSSチュートリアル >Symfony 2 プロジェクト内の CSS ファイル内の画像をどのように参照しますか?
問題:
画像へのパスを含む CSS ファイルがあります。フォントやその他のアセット。ファイル構造は次のとおりです:
... +-src/ | +-MyCompany/ | +-MyBundle/ | +-Resources/ | +-assets/ | +-css/ | +-stylesheets... +-web/ | +-images/ | +-images... ...
スタイルシートで画像を参照したいと考えていますが、さまざまな解決策には問題があることが判明しています。
1. 「パブリック」ディレクトリと「プライベート」ディレクトリに分割します:
オリジナルの CSS ファイルをプライベート ディレクトリ (例: src/Common/DirtyBundle/Resources/assets/css) に保存します。 assetic:dump を実行する前に、これらのファイルをパブリック ディレクトリにコピーします (例: web/bundles/commondirty/css_original)。
2.アセティック「cssrewrite」フィルターを使用する (オプション):
このフィルターは厳密には必要ありませんが、パスの操作を簡素化できます。使用する場合は、それに応じて構文を調整してください。
3. Twig との統合:
Twig テンプレートで、適切なディレクトリとフィルターを使用して CSS ファイルを参照します:
{% 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.ハンドル イメージ パス:
構成に応じて、相対パスまたは絶対パスを使用してイメージを参照します。例:
5.メンテナンス:
assetic:dump を使用して結合 CSS ファイルを生成した後、必要に応じてパブリック ディレクトリから元の CSS ファイルを削除できます。
6.残りの制約:
以上がSymfony 2 プロジェクト内の CSS ファイル内の画像をどのように参照しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。