webpack - not able to resolve img src when passing props

I found that the img src path is not resolved through the web inspector

I tried to add the require keyword for the image property

  const articles = [
    {
      ...
      image: require("@/assets/images/pages/home/blogs-image-01.png")
    }
  ];

But error occurs

Module not found: Error: Can't resolve '@/assets/images/pages/home/blogs-image-01.png'

How to solve this issue?

src/components/slick-carousel.js

import React from "react";
import Slider from "react-slick";

function slickCarousel(props) {
  const { items } = props;

  const settings = {
    arrows: true,
    focusOnSelect: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    touchThreshold: 1,
    touchMove: true
  };

  return (
    <div className="slick">
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              <div className="slick-item">
                <img src={item.image} alt={item.title} />
              </div>
              <div className="item__title">{item.title}</div>
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default slickCarousel;

App.js

import "./styles.css";

import SlickCarousel from "./components/slick-carousel";

export default function App() {
  const articles = [
    {
      id: 1,
      title: "Title",
      image: "@/assets/images/pages/home/blogs-image-01.png"
    }
  ];
  return (
    <div className="App">
      <SlickCarousel items={articles} />
    </div>
  );
}

webpack/webpack.base.js

const webpack = require("webpack");

const utils = require("./utils");

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

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    extensions: ["*", ".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        }
      },
      {
        test: /\.(ico|json)$/,
        exclude: /node_modules/,
        use: ["file-loader?name=[name].[ext]"] // ?name=[name].[ext] is only necessary to preserve the original file name
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      inject: true
    })
  ]
};

webpack/webpack.dev.js

const { merge } = require("webpack-merge");
const base = require("./webpack.base");

const Dotenv = require("dotenv-webpack");

module.exports = merge(base, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    publicPath: "/"
  },
  devServer: {
    port: 3030,
    static: true,
    static: "dist"
  },
  plugins: [new Dotenv({ path: "./.env.development" })]
});

webpack/utils.js

const path = require("path");

module.exports = {
  resolve: function (dir) {
    return path.join(__dirname, "..", dir);
  }
};