الصورة لا تظهر عند وضع الرابط في ملف SASS في webpack image error

هل السؤال متعلق بدورة ما؟ يفضل ارفاق السؤال ضمن قسم تعليقات الطلبة اسفل الفيديو الذي تواجه به المشكلة.

وإلا فإنك ستحتاج ارفاق مزيدا من التفاصيل، مثل نص رسالة الخطأ التي تظهر، ومحتوى ملف اعداد ويب باك webpack.config.js

بتاريخ 4 دقائق مضت قال Adnane Kadri:

هل السؤال متعلق بدورة ما؟ يفضل ارفاق السؤال ضمن قسم تعليقات الطلبة اسفل الفيديو الذي تواجه به المشكلة.

وإلا فإنك ستحتاج ارفاق مزيدا من التفاصيل، مثل نص رسالة الخطأ التي تظهر، ومحتوى ملف اعداد ويب باك webpack.config.js

ليس هناك خطا (error) ولكن انا اتسائل لماذا

محتوى ملف webpack.config.js

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HTMLWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");



module.exports = {

  entry: {

    app: path.resolve(__dirname, "src/index.js"),

  },



  output: {

    path: path.resolve(__dirname, "dist"),

    clean: true,

    filename: "[name]_bundle.js",

  },



  devServer: {

    static: "./dist",

    hot: true,

    open: true,

    devMiddleware: {

      writeToDisk: true,

    },

  },



  module: {

    rules: [

      {

        test: /\.html$/,

        loader: "html-loader",

      },

      {

        test: /\.(sa|sc|c)ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],

      },

      {

        test: /\.(png|jpg|jpeg|svg|gif)$/,

        use: {

          loader: "file-loader",

          options: {

            esModules: true,

            outputPath: "images",

            name: "images/[name].[ext]",

          },

        },

      },

    ],

  },



  plugins: [

    new HTMLWebpackPlugin({

      filename: "index.html",

      template: "./src/index.html",

    }),

    new MiniCssExtractPlugin({ filename: "css/style.css" }),

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

    }),

  ],

};

بتاريخ 3 دقائق مضت قال Mohamed Montaser3:

ليس هناك خطا (error) ولكن انا اتسائل لماذا

محتوى ملف webpack.config.js

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HTMLWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");



module.exports = {

  entry: {

    app: path.resolve(__dirname, "src/index.js"),

  },



  output: {

    path: path.resolve(__dirname, "dist"),

    clean: true,

    filename: "[name]_bundle.js",

  },



  devServer: {

    static: "./dist",

    hot: true,

    open: true,

    devMiddleware: {

      writeToDisk: true,

    },

  },



  module: {

    rules: [

      {

        test: /\.html$/,

        loader: "html-loader",

      },

      {

        test: /\.(sa|sc|c)ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],

      },

      {

        test: /\.(png|jpg|jpeg|svg|gif)$/,

        use: {

          loader: "file-loader",

          options: {

            esModules: true,

            outputPath: "images",

            name: "images/[name].[ext]",

          },

        },

      },

    ],

  },



  plugins: [

    new HTMLWebpackPlugin({

      filename: "index.html",

      template: "./src/index.html",

    }),

    new MiniCssExtractPlugin({ filename: "css/style.css" }),

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

    }),

  ],

};

 

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

بتاريخ 3 دقائق مضت قال Adnane Kadri:

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

لا

بتاريخ 20 دقائق مضت قال Adnane Kadri:

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

.....

بتاريخ 6 ساعات قال Mohamed Montaser3:

لا

.....

أرجو ضغط المشروع و إرفاقه للتجريب إن لم يكن لديك مشكلة.

بتاريخ On 6/22/2022 at 01:37 قال Wael Aljamal:

أرجو ضغط المشروع و إرفاقه للتجريب إن لم يكن لديك مشكلة.

SMAK.zip

بتاريخ 16 دقائق مضت قال Mohamed Montaser3:

SMAK.zip

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 

npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML

  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

بتاريخ 3 ساعات قال Wael Aljamal:

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 

npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML

  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

انا عدلتها خليتها layer في الhtml وزبطها ب sass بس لو هحط السرس من الساس مش هيظهر

بتاريخ 1 دقيقة مضت قال Mohamed Montaser3:

انا عدلتها خليتها layer في الhtml وزبطها ب sass بس لو هحط السرس من الساس مش هيظهر

أحسنت إيجاد حل للمشكلة، 

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

بتاريخ 3 ساعات قال Wael Aljamal:

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 

npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML

  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

عدلتها بس مش شغاله من ملف ال sass

بتاريخ 2 ساعات قال Mohamed Montaser3:

عدلتها بس مش شغاله من ملف ال sass

بتاريخ 2 ساعات قال Wael Aljamal:

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

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