css-loader: Unexpected output of url includes `file://` protocol

• Operating System: MacOS 11.4
• Node Version: 16.3.0
• NPM Version: 7.15.1
• webpack Version: 5.41.1
• css-loader Version: 6.2.0

Using default options of css-loader

transform background-image: url(../img/foo/bar.jpg) supposed to be background-image: url(/img/foo/bar.jpg)

but go background-image: url(file:///img/foo/bar.jpg), please see the code below

the original css code

.Banner {
    height: 240px;
    background-image: **url(../assets/img/banner.jpg)**;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 35px;
}

Expected Behavior

.Home_Banner__3Z7xi {
  height: 240px;
  background-image: **url(/33e75dae657057c9451f.jpg)**;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  position: relative;
  margin-bottom: 35px;
}

Actual Behavior

.Home_Banner__3Z7xi {
  height: 240px;
  background-image: **url(file:///33e75dae657057c9451f.jpg)**;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  position: relative;
  margin-bottom: 35px;
}

Code

// webpack.config.js

{
  test: /\.css$/,
 loader:require.resolve('css-loader')
}