Mengapa Imej Saya Rosak Apabila Menggunakan MVC4 StyleBundles?

MVC4 StyleBundle Menyelesaikan Isu Imej

Isu timbul apabila menggunakan StyleBundle MVC untuk menggabungkan fail CSS dan rujukan imej luaran dalam subfolder. Apabila mentakrifkan berkas menggunakan laluan maya yang tidak sepadan dengan laluan kandungan fizikal, laluan imej relatif dalam fail CSS rosak.

Penyelesaian

Pendekatan yang betul adalah untuk menentukan berkas pada laluan yang sama dengan fail sumber yang digabungkan. Contohnya:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css"));

Dengan mentakrifkan himpunan pada laluan yang sama dengan fail CSS sumber, laluan imej relatif kekal sah. Ini kerana bahagian terakhir laluan bundle berfungsi sebagai nama fail untuk fail CSS yang digabungkan.

Penyelesaian Alternatif

Seperti yang dicadangkan oleh Hao Kung, pendekatan alternatif ialah menggunakan CssRewriteUrlTransformation untuk menulis semula rujukan imej dalam CSS yang digabungkan fail:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css",
                     new CssRewriteUrlTransform()));

Transformasi ini akan mengubah suai laluan imej relatif secara automatik untuk memastikan ia menghala ke lokasi yang betul selepas digabungkan.

Nota

Bila menggunakan CssRewriteUrlTransformation, adalah penting untuk mengetahui potensi isu dengan menulis semula laluan mutlak dalam direktori maya. Tingkah laku ini mungkin tidak sesuai untuk semua senario.

Atas ialah kandungan terperinci Mengapa Imej Saya Rosak Apabila Menggunakan MVC4 StyleBundles?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!