it-swarm.dev

Symfony2 - Assetic - memuat gambar dalam CSS

Saya memiliki CoreBundle yang berisi file dan gambar css utama. Sekarang saya punya masalah ketika saya memuat gambar dari css; gambar tidak ditampilkan.

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

(dengan path lengkap berfungsi)

Saya menginstal aset menggunakan perintah: assets:install web dan saya bisa melihat gambar dan file css di bawah web/bundles/cmtcore/(css|images).

Berikut struktur file di dalam bundel inti:

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

Dan inilah cara saya memuat file css ke dalam template:

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

Terima kasih atas bantuan Anda sebelumnya.

59
LBridge

gunakan filter cssrewrite dari bundel Assetic

Di config.yml:

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

Dan kemudian panggil stylesheet Anda seperti ini:

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

Oh dan jangan lupa untuk menggunakan php app/console assetic:dump

54
Inoryy

Ada beberapa masalah dengan ccsrewrite:

filter CssRewrite tidak berfungsi ketika menggunakan sintaks @MyBundle di AsseticBundle untuk merujuk aset. Ini adalah batasan yang diketahui.

Ini adalah versi php untuk cssrewrite:

<?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

Saya memecahkan masalah dengan mengikuti petunjuk di situs ini: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Masalah sebenarnya adalah Anda mereferensi sumber daya bundel Anda secara absolut, tetapi harus merujuknya secara relatif.

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

Bersihkan cache Anda dan instal kembali aset Anda

13
Yann

Saya telah mengembangkan bundel kecil dengan filter tambahan untuk mengatasi masalah ini. Anda dapat menemukannya di github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Dengan bundel ini, @Notation untuk assetic berfungsi jika Anda memiliki jalur relativ di file css Anda.

6
fkrauthan

Mengenai jawaban Yann, sebenarnya Anda tidak perlu menginstal ulang aset setelah setiap perubahan jika Anda menggunakan opsi --symlink.

Namun, perhatikan bahwa menjalankan skrip instal vendor akan menimpa symlink, jadi Anda harus menghapus folder bundles/* dan menginstal aset dengan opsi --symlink lagi setelah menjalankan skrip vendor.

6
tystr

Saya memecahkan masalah ini dengan membuat folder 'gambar' secara permanen dengan gambar di dalamnya di folder 'symfony_root/web /'. Hasil: 'symfony_root/web/images /' - dan itu menjadi sangat bagus!

1
yura

Saya memecahkan ini menggunakan htaccess:

Aset saya disimpan di src/Datacode/BudgetBundle/Resources/public/(css | img | js) dan parameter output assetic diatur untuk menulis ke: bundel/datacodebudget/css/styles.css (dalam direktori web)

Dalam css saya, saya menggunakan jalur relatif ../ untuk referensi gambar.

Berikut adalah aturan .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 saya dimuat sebagai berikut:

{% 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 %}

Dalam file config.yml saya, saya punya:

assetic:
    use_controller: true

Yang (tanpa penulisan ulang htaccess) menyebabkan gambar tidak dimuat karena jalur relatif untuk gambar ada di app_dev.php/bundles/datacodebudget/img/someimage.jpg. Menggunakan filter cssrewrite tidak berfungsi baik karena kemudian menulis ulang ../img menjadi ../../../../Resources/public/img/ yang beralih ke Sumber Daya/publik/img.

Dengan menggunakan metode htaccess gambar dimuat dengan baik dan saya hanya perlu menjalankan assetic: dump/aset: instal ketika saya menambahkan gambar baru atau ingin mendorong perubahan produksi.

1
Matt Davis

Saya memiliki masalah yang sama, dan saya telah mencari sekitar setidaknya satu hari, dan saya tidak yakin ada solusi praktis yang baik untuk masalah ini. Saya sarankan menggunakan Assetic untuk menangani javascript dan css, dan kemudian hanya meletakkan gambar Anda di dalam dokumen situs web Anda. Misalnya, jika Anda memiliki file css yang mereferensikan ../images/file.png, cukup buat dan gambar folder di bawah dokumen Anda dan letakkan file.png di sana. Ini jelas bukan solusi teoretis terbaik, tetapi itu satu-satunya yang saya temukan yang benar-benar berfungsi.

0
adavea