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

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

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

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

  بتاريخ On 10‏/10‏/2022 at 15:21 قال أسامة زيادة:

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

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

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

أظهر المزيد  

لقد قمت بها

  بتاريخ On 10‏/10‏/2022 at 15:36 قال 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",
            }
          },
        ],
      },
    ],
  },

};

  بتاريخ On 10‏/10‏/2022 at 16:00 قال 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

  بتاريخ On 10‏/10‏/2022 at 16:15 قال أسامة زيادة:

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

npm i css-loader@5.0.0

 

أظهر المزيد  

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

  بتاريخ On 10‏/10‏/2022 at 16:21 قال Mohamed Ramy:

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

أظهر المزيد  

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

  بتاريخ On 10‏/10‏/2022 at 16:21 قال Mohamed Ramy:

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

أظهر المزيد  

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

npm install -D file-loader

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

npm install -D html-loader@1.3.2

  بتاريخ On 10‏/10‏/2022 at 16:32 قال علي محسن:

 

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

 

أظهر المزيد  

tourism_company.zipFetching info...

  بتاريخ On 10‏/10‏/2022 at 16:44 قال أسامة زيادة:

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

npm install -D file-loader

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

npm install -D html-loader@1.3.2

 

أظهر المزيد  

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