web-dev-qa-db-ja.com

Symfony2-Assetic-CSSで画像を読み込む

メインのcssファイルと画像を含むCoreBundleがあります。 CSSから画像を読み込むと問題が発生します。画像は表示されません。

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

（フルパスで動作します）

コマンド_assets:install web_を使用してアセットをインストールすると、web/bundles/cmtcore/(css|images)の下に画像とcssファイルが表示されます。

コアバンドル内のファイル構造は次のとおりです。

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

そして、cssファイルをテンプレートに読み込む方法は次のとおりです。

_ {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}
_

よろしくお願いします。

cssimagebackground-imagesymfonyassets
59
LBridge

asseticバンドルのcssrewriteフィルターを使用します

Config.ymlで：

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

そして、次のようにスタイルシートを呼び出します。

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

ああ、php app/console assetic:dumpを使用することを忘れないでください

54
Inoryy

Ccsrewriteにはいくつかの問題がありました。

AsseticBundleで@MyBundle構文を使用してアセットを参照する場合、CssRewriteフィルターは機能しません。これは既知の制限です。

Cssrewriteのphpバージョンは次のとおりです。

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>
17
user257980

このサイトの指示に従って問題を解決しました： http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/ =

実際の問題は、バンドルリソースを絶対参照することですが、それらを相対参照する必要があることです。

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

キャッシュをクリアして、アセットを再度インストールします

13
Yann

この問題を解決するために、追加のフィルターを備えた小さなバンドルを開発しました。 githubで見つけることができます： https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

このバンドルを使用すると、cssファイルに相対パスがある場合、アセットの@Notationが機能します。

6
fkrauthan

Yannの答えに関しては、--symlinkオプションを使用すれば、変更のたびにアセットを再インストールする必要はありません。

ただし、ベンダーインストールスクリプトを実行するとシンボリックリンクが上書きされるため、ベンダースクリプトの実行後にbundles/*フォルダーを削除し、--symlinkオプションでアセットを再度インストールする必要があります。

6
tystr

「symfony_root/web /」フォルダー内に画像を含む「images」フォルダーを永続的に作成することで、この問題を解決しました。結果： 'symfony_root/web/images /'-それは素晴らしい仕事になります！

1
yura

私はhtaccessを使用してこれを解決しました：

私のアセットはsrc/Datacode/BudgetBundle/Resources/public /（css | img | js）に保存され、assetic出力パラメーターは次の場所に書き込むように設定されています：bundles/datacodebudget/css/styles.css（Webディレクトリ内）

私のCSSでは、相対パス../を使用して画像を参照します。

.htaccessルールは次のとおりです。

# Make image path work on dev
# i.e. /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]

私のCSSは次のようにロードされます：

{% 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"
%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

私のconfig.ymlファイルには次のものがあります：

assetic:
    use_controller: true

画像の相対パスがapp_dev.php/bundles/datacodebudget/img/someimage.jpgにあるため、これは（htaccessの書き換えなしで）画像をロードしません。 cssrewriteフィルターを使用しても、../imgが../../../../Resources/public/img/に書き換えられ、Resources/public/imgに解決されるため、機能しません。

Htaccessメソッドを使用すると、イメージが正常にロードされ、新しいイメージを追加するとき、または運用環境に変更をプッシュするときにassetic：dump/asset：installを実行するだけで済みます。

1
Matt Davis

私は同様の問題を抱えており、少なくとも1日は見回しましたが、この問題に対する優れた実用的な解決策があるとは確信していません。 Asseticを使用してjavascriptとcssを処理し、Webサイトのdocrootに画像を置くことをお勧めします。たとえば、../images/file.pngを参照するcssファイルがある場合は、docrootの下にimagesフォルダーを作成し、そこにfile.pngを配置します。これは間違いなく最良の理論的解決策ではありませんが、実際に機能する唯一の解決策です。

0
adavea