• 0

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

السلام عليكم

في المشروع الذي إنشأه واجهتني مشكلة وهي عدم ظهور الصور في المتصفح!!!

وقمت بالتأكد من تثبيت الحزم وشيفرات ملف (web pack) وجميع الشيفرات وكل شيء على ما يرام

وأيضاً حاولت البحث عن حل لهذه المشكلة ولكن لم أجد !!

ما هي إحتمالات عدم ظهور الصور في المتصفح؟؟؟

وشكراً.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

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

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

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

npm i html-loader@1-D

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

تمّ تعديل بواسطة عبدالباسط ابراهيم
إضافة بعض المعلومات
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

مرحبا علاء
هناك العديد من المشاكل التي من الممكن أن تسبب في ذلك
المشكلة الأولى تعارض حزمتي 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",
            }
          }
        ]
      },

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

للمشكلة عدة أسباب محتملة .ولكن الأرجح أنها قد تكون بسبب إستعمال 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 لنفس لواحق الملفات كذا مرة لا مرة واحدة .  

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 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)

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 22 دقائق مضت قال علاء الدين الزهوري:

مرحباً

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

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

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

 

مرحباً

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

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

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن