لحل مشكلتك، يمكنك استخدام Angular CLI لإنشاء مسارات URL كاملة للصور في ملفات CSS أو SCSS الناتجة. يقوم Angular CLI بتوليد مسارات URL مطابقة للملفات الموجودة في مجلدات المشروع، مما يجعلها متاحة للاستخدام في تنسيقات CSS أو SCSS.
لحل المشكلة الأساسية التي تواجهها، يمكنك محاولة استخدام مسار نسبي للصورة في ملف SCSS الخاص بالمكون، على سبيل المثال:
scssbackground-image: url('logo.jpg');
إذا كانت هذه الصورة في نفس مجلد المكون، يجب أن تعمل بشكل صحيح عند تشغيل التطبيق باستخدام ng serve.
إذا كنت بحاجة للرجوع إلى صورة خارج مجلد المكون، فيمكنك استخدام مسارات نسبية أو مسارات مطابقة للملفات في مشروع Angular. على سبيل المثال، إذا كانت الصورة في مجلد “assets” في المشروع، يمكنك استخدام:
scssbackground-image: url('../../assets/images/logo.jpg');
تأكد من استبدال المسار بالمسار الصحيح لمجلد الصور في مشروع Angular الخاص بك.
بالنسبة للاستفسار عن الـ URL resolver، فليس هناك حاجة لتكوينه بشكل منفصل في Angular CLI. يتولى Angular CLI توليد مسارات URL كاملة للصور والملفات الأخرى بشكل تلقائي، وذلك عند تنفيذ أمر ng serve أو ng build.
المزيد من المعلومات
عند استخدام Angular CLI لإنشاء تطبيق Angular، يمكنك الاعتماد على بنية المجلدات الافتراضية التي يوفرها Angular CLI. على سبيل المثال، يمكنك وضع الصور في مجلد “assets” في جذر المشروع، ومن ثم الرجوع إليها في ملفات CSS أو SCSS باستخدام مسارات نسبية.
بالنسبة للحصول على المزيد من المعلومات حول كيفية استخدام Angular CLI وتكوينه، يمكنك الاطلاع على الوثائق الرسمية لـ Angular CLI على الرابط التالي: Angular CLI Documentation.
يحتوي دليل المستخدم على معلومات شاملة حول كيفية بناء وتشغيل تطبيق Angular باستخدام Angular CLI، بما في ذلك كيفية التعامل مع الملفات الثابتة مثل الصور وملفات الأسلوب (CSS / SCSS).
