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

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

علاء الدين الزهوري

السؤال

السلام عليكم

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

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

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

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

وشكراً.

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

Recommended Posts

  • 1

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

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

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

npm i html-loader@1-D

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

تم التعديل في بواسطة عبدالباسط ابراهيم
إضافة بعض المعلومات
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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",
            }
          }
        ]
      },

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

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

  • 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 تظهر و لكن عند اجراء التنسيقات تختفي و احيانا تستجيب للتنسيقات و تعاود بالاختفاء عند تحديث الصفحة لذلك لا أستطيع التحكم اجراء التنسيقات لها ما سبب هذه المشكلة ؟

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...