مشكلة عدم ظهور الصور في المتصفح webpack

توجد العديد من المشاكل التي يمكن لها تسبب هذا الخطأ منها 

• عدم تثبيت ال loaders  ال file-loader
• استخدام ال file-loader مع إصدار 2 من ال html-loader 

ولكن أتوقع أنك تستخدم الإصدار الثاني من ال html-loader لأن هذا الإصدار يتعارض مع عمل ال file-loader لذلك تأكد من ملف ال package.json  أنك تستخدم الإصدار الأول وإن كنت تستخدم الإصدار الثاني قم بتنفيذ هذا الأمر 

npm i html-loader@1-D

ثم بعد ذلك جرب تشغيل webpack

مرحبا علاء
هناك العديد من المشاكل التي من الممكن أن تسبب في ذلك
المشكلة الأولى تعارض حزمتي file-loader و html-loader ,لحل هذه المشكلة تأكد من انك تستخدم الاصدار 1.3.2 من حزمة html-loader, يمكنك تثبيتها من خلال الخطوات التالية
في ملف package.json استبدل اصدار html-loader بهذا الاصدار

"html-loader": "^1.3.2",

ثم قم بالامر 

npm i

المشكلة الثانية ربما لديك مشاكل في كتابة الكود الخاص بمعالجة الصور, حاول أن يكون مثل الكود التالي

      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: "file-loader", 
            options: {
              name: '[name].[ext]',
              outputPath: "images",
            }
          }
        ]
      },

المشكلة الثالثة تأكد من وجود الصورة في المسار الذي حددته
اذا لم ينجح الامر أرجو منك ارفاق ملفات المشروع لنساعدك في حل المشكلة
شكرا لك

للمشكلة عدة أسباب محتملة .ولكن الأرجح أنها قد تكون بسبب إستعمال loader واحد لنفس نوع الملف أكثر من مرة فيتم بناء مسار الصورة أكثر من مرة فيتم كسر المسار .

مثال عن ذلك : 

إن كنت تقوم بتحميل الملفات باللواحق woff , woff2 , eot, ttf , png , svg بإستعمال url-loader ثم تقوم بتحميل الملفات باللواحق jpeg , jpg , gif , png , svg بإستعمال url-loader ضمن كائن loader جديد فسيتم كسر مسارات الصور بالصيغ png و svg ولن تظهر في المتصفح .

loaders: [
  .. 
  {
    test: /\.(jpe?g|gif|png|svg)$/i,
    loader: 'url-loader',
  }, 
  { 
    test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
    loader: 'url-loader' 
  }
  .. 
],

الحل : 

تحميل الملفات من نفس النوع مرة واحدة , بحذف الملفات ذات اللواحق png , svg المكررة فيكون : 

loaders: [
  .. 
  {
    test: /\.(jpe?g|gif|png|svg)$/i,
    loader: 'url-loader',
  }, 
  { 
    test: /\.(woff|woff2|eot|ttf)$/, 
    loader: 'url-loader' 
  }
  .. 
],

ملاحظة : ليس بالضرورة أن يكون url-loader , المهم في الإحتمال هو أن يكون قد تم إستعمال نفس الـ loader لنفس لواحق الملفات كذا مرة لا مرة واحدة .  

بتاريخ 19 ساعات قال محمد أبو عواد:

مرحبا علاء
هناك العديد من المشاكل التي من الممكن أن تسبب في ذلك
المشكلة الأولى تعارض حزمتي file-loader و html-loader ,لحل هذه المشكلة تأكد من انك تستخدم الاصدار 1.3.2 من حزمة html-loader, يمكنك تثبيتها من خلال الخطوات التالية
في ملف package.json استبدل اصدار html-loader بهذا الاصدار

"html-loader": "^1.3.2",

ثم قم بالامر 

npm i

المشكلة الثانية ربما لديك مشاكل في كتابة الكود الخاص بمعالجة الصور, حاول أن يكون مثل الكود التالي

      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: "file-loader", 
            options: {
              name: '[name].[ext]',
              outputPath: "images",
            }
          }
        ]
      },

المشكلة الثالثة تأكد من وجود الصورة في المسار الذي حددته
اذا لم ينجح الامر أرجو منك ارفاق ملفات المشروع لنساعدك في حل المشكلة
شكرا لك

مرحباً

صحيح كانت المشكلة من اصدار ال (html-loader) وقمت بحلها وظهرت الصور

ولكن بعد حل تلك المشكلة وليس بكثير عادت نفس المشكلة وأيضاً بدأت بتجربة عدة حلول وقمت بالغاء تثبيت (html-loader) وبإعادة تثبيتها بلإصدار "^1.3.2" وقمت أيضاً بمراجعة ملف (webpack)

ولكن دون فائدة لم تحل المشكلة !!!!

بتاريخ 21 ساعات قال عبدالباسط ابراهيم:

توجد العديد من المشاكل التي يمكن لها تسبب هذا الخطأ منها 

• عدم تثبيت ال loaders  ال file-loader
• استخدام ال file-loader مع إصدار 2 من ال html-loader 

ولكن أتوقع أنك تستخدم الإصدار الثاني من ال html-loader لأن هذا الإصدار يتعارض مع عمل ال file-loader لذلك تأكد من ملف ال package.json  أنك تستخدم الإصدار الأول وإن كنت تستخدم الإصدار الثاني قم بتنفيذ هذا الأمر 

npm i html-loader@1-D

ثم بعد ذلك جرب تشغيل webpack

مرحباً

صحيح كانت المشكلة من اصدار ال (html-loader) وقمت بحلها وظهرت الصور

ولكن بعد حل تلك المشكلة وليس بكثير عادت نفس المشكلة وأيضاً بدأت بتجربة عدة حلول وقمت بالغاء تثبيت (html-loader) وبإعادة تثبيتها بلإصدار "^1.3.2" وقمت أيضاً بمراجعة ملف (webpack)

ولكن دون فائدة لم تحل المشكلة !!!!

بتاريخ 22 دقائق مضت قال علاء الدين الزهوري:

مرحباً

صحيح كانت المشكلة من اصدار ال (html-loader) وقمت بحلها وظهرت الصور

ولكن بعد حل تلك المشكلة وليس بكثير عادت نفس المشكلة وأيضاً بدأت بتجربة عدة حلول وقمت بالغاء تثبيت (html-loader) وبإعادة تثبيتها بلإصدار "^1.3.2" وقمت أيضاً بمراجعة ملف (webpack)

ولكن دون فائدة لم تحل المشكلة !!!!

 

مرحباً

صحيح كانت المشكلة من اصدار ال (html-loader) وقمت بحلها وظهرت الصور

ولكن بعد حل تلك المشكلة وليس بكثير عادت نفس المشكلة وأيضاً بدأت بتجربة عدة حلول وقمت بالغاء تثبيت (html-loader) وبإعادة تثبيتها بلإصدار "^1.3.2" وقمت أيضاً بمراجعة ملف (webpack)

ولكن دون فائدة لم تحل المشكلة !!!!

مرحبا مجددا
يظهر لك في مشغل الأوامر المشاكل التي تواجهك حاول الاستفادة من مشغل الأوامر في هذا الشيء فهو الذي يخبرك كيف يسير المشروع, هل يسير المشروع بشكل جيد أم هناك بعض الأخطاء
اذا كان لديك بعض الأخطاء بمكنك محاول حلها بنفسك في البداية, اذا لم تتمكن من فعل ذلك يمكنك البحث عن المشكلة في جوجل وسوف تجد العديد من نتائج البحث المفيدة
أما فيما يخص مشكلتك ربما لديك مشاكل في طريقة معالجة الصور, أو قمت بكتابة الكود في المكان الخاطئ من ملف webpack.config.js, أو تأكد من اسم الصور وامتدادها وتأكد بأنك تحدد مسار الصور بشكل صحيح
شكرا لك

الصورة لدي في webpack تظهر و لكن عند اجراء التنسيقات تختفي و احيانا تستجيب للتنسيقات و تعاود بالاختفاء عند تحديث الصفحة لذلك لا أستطيع التحكم اجراء التنسيقات لها ما سبب هذه المشكلة ؟