اذهب إلى المحتوى

السؤال

نشر

لا يمكنني مشاركة الملف لانني في اختبار  . في ويباك لا تظهر اي رسالة ايرور علي الاطلاق ولكن مكتبة font/awesome  لا تعمل رغم انها مضمنه وموجوده في الموديولز والصور من نوع jpg and png لا تظهر رغم اعدادات الصور صحيحة في webpack.config.js ما الاسباب المحتمله ...وشكرا

Recommended Posts

  • 0
نشر

لا مشكلة في مشاركة الكود الخاص لمساعدتك في حل المشكلة طالما أنك تحاول جاهدًا وعملت على الكود بنفسك.

وبالنسبة للصور تأكد من إضافة التالي ضمن مصفوفة rules في إعدادات webpack.

{
    test: /\.(png|jpe?g|gif|svg)$/i,
   type: "asset/resource",
 }

وبالنسبة للخطوط والأيقونات تأكد من إضافة الإعدادات التالية

 {
   test: /\.(svg|eot|woff|woff2|ttf)$/,
    use: ['file-loader'],
}

وتأكد من تحميل مكتبة font/awesome بالشكل التالي وهي للإصدار v5.5.0:

npm install --save-dev @fortawesome/fontawesome-free

وفي ملف index.js قم بإضافة التالي لاستيراد المكتبة:

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

بعض الأسباب التي عليك التحقق منها:

  •  قد يكون مسار الملفات غير صحيح، فإذا كان مسار ملفات font/awesome أو الصور غير صحيح، فلن يتم تحميل الملفات ولا يمكن عرضها.
  • الإعدادات الخاصة بـ webpack.config.js: يجب التأكد من أن الإعدادات الخاصة بـ webpack.config.js صحيحة وتم تكوينها بشكل صحيح، فإذا لم يتم تكوين webpack.config.js بشكل صحيح، فلا يمكن عرض الصور والإضافات.
  • يجب التأكد من أن الملفات مضمنة بشكل صحيح في الملف HTML الخاص بك، إذا لم يتم تضمين الملفات بشكل صحيح، فلا يمكن عرضها.
  •  قد يكون هناك مشكلات في الإضافات أو الصور نفسها، فإذا كانت الملفات تالفة أو تحتوي على أخطاء، فلا يمكن عرضها.
  • 0
نشر

إذا لم تعمل الخطوات السابقة معك ومازالت المشكلة قائمة فقم بتضمين المكتبة ك cdn كالتالي

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>

و تأكد من أن أسماء الأيقونات سليمة لترى النتيجة 

وحاول تطبيق الخطوات بالترتيب حتى تعرف مكان المشكلة بالضبط

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...