لدي مشكلة في محمل الصور في Webpack

هل قمت بكتابة الشيفرة الخاصة بالصور في ملف webpack.config.js ؟ 

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

في حال أنك قمت بكتابتها ، ومازالت تظهر المشكلة ، قم بإرفاق الشيفرة البرمجية التي تتوقع أن تكون المشكلة بها . 

بتاريخ 14 دقائق مضت قال أسامة زيادة:

هل قمت بكتابة الشيفرة الخاصة بالصور في ملف webpack.config.js ؟ 

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

في حال أنك قمت بكتابتها ، ومازالت تظهر المشكلة ، قم بإرفاق الشيفرة البرمجية التي تتوقع أن تكون المشكلة بها . 

لقد قمت بها

بتاريخ 4 دقائق مضت قال Mohamed Ramy:

لقد قمت بها

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

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(sass|css|scss)$/,
        use: [
          {// Creates `style` nodes from JS strings
          loader : MiniCssExtractPlugin.loader,
          options:{
            publicPath:'../'
          },
        },
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: "images",
            }
          },
        ],
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: "fonts",
            }
          },
        ],
      },
    ],
  },

};

بتاريخ 12 دقائق مضت قال Mohamed Ramy:

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(sass|css|scss)$/,
        use: [
          {// Creates `style` nodes from JS strings
          loader : MiniCssExtractPlugin.loader,
          options:{
            publicPath:'../'
          },
        },
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: "images",
            }
          },
        ],
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: "fonts",
            }
          },
        ],
      },
    ],
  },

};

 

وهل ما زالت المشكلة لديك بعد استخدام الشيفرة ، في حال كانت ماتزال المشكلة ، هل يمكنك إخباري بإصدار css-loader الذي قمت بتنصيبه ، أو قم بتنصيب هذا الإصدار وأخبرني بالنتيجة هل مازالت تظهر الصور .

npm i css-loader@5.0.0

بتاريخ 6 دقائق مضت قال أسامة زيادة:

وهل ما زالت المشكلة لديك بعد استخدام الشيفرة ، في حال كانت ماتزال المشكلة ، هل يمكنك إخباري بإصدار css-loader الذي قمت بتنصيبه ، أو قم بتنصيب هذا الإصدار وأخبرني بالنتيجة هل مازالت تظهر الصور .

npm i css-loader@5.0.0

 

مازات المشكله

بتاريخ 18 دقائق مضت قال Mohamed Ramy:

مازات المشكله

يرجى التفضل بإدراج المشروع مضغوطاً الى zip او rar بواسطة winrar او مايتوفر لديك كي نتمكن من تشخيص المشكلة. إذا تواجه مشكلة في ضغط الملفات يمكننا شرح ذلك في حال تعذر عليك.

بتاريخ 21 دقائق مضت قال Mohamed Ramy:

مازات المشكله

تأكد من تثبيت المحل file-loader . 

npm install -D file-loader

وأحد الحلول التي عالجنا بها مشكلة الصور ثبيت محمل html-loader بالإصدار1.3.2 بتنفيذ الأمر التالي

npm install -D html-loader@1.3.2

بتاريخ 13 دقائق مضت قال علي محسن:

 

يرجى التفضل بإدراج المشروع مضغوطاً الى zip او rar بواسطة winrar او مايتوفر لديك كي نتمكن من تشخيص المشكلة. إذا تواجه مشكلة في ضغط الملفات يمكننا شرح ذلك في حال تعذر عليك.

 

tourism_company.zip

بتاريخ 2 دقائق مضت قال أسامة زيادة:

تأكد من تثبيت المحل file-loader . 

npm install -D file-loader

وأحد الحلول التي عالجنا بها مشكلة الصور ثبيت محمل html-loader بالإصدار1.3.2 بتنفيذ الأمر التالي

npm install -D html-loader@1.3.2

 

تم حل المشكله شكرا جزيلا