عرض الصورة في React باستخدام webpack

أحاول عرض الصور في تطبيق React الخاص بي ، لكنني أحصل على

failed to load resource..404 not found

كما هو مذكور في ملف App.js ، لا يعمل المسار النسبي ولكن استيراد الصورة يعمل. أريد استخدام المسارات النسبية لوظيفة مختلفة في تطبيقي
App.js

import React from 'react';
import Img from './images/test.jpg';

function App() {
   return(
      <div className="App">
         <img src={Img} alt="test" /> //option-1 (this works)
         <img src='./images/test.jpg' alt="test-2" /> //option-2 (this does not work)
      </div>
    );
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
     path: path.join(__dirname,'/dist'),
     filename: 'bundle.js'
  },
  plugins: [
     new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
     rules: [
          {
             test: /\.js$/,
             exclude: /node_modules/,
             use: {
                  loader: 'babel-loader',
                  options: {
                     presets: ['@babel/preset-env','@babel/preset-react']
                  }
             }
         },
         {
            test: /\.css$/,
            use: ['style-loader','css-loader']
         },
         {
            test: /\.jpg$/,
            type: 'asset/resource'
         }
    ]
  }
}

هيكلية الملفات

-node_modules
-src
  -components
  -css
  -images
     -test.jpg
  -App.js
  -index.html
  -index.js
-package.json
-webpack.config.js

لقد حاولت تغيير قاعدة الصورة في webpack.config.js كالتالي

{
    test: /\.js$/,
    use: ['file-loader','url-loader']
}

أرجو منكم المساعدة