react打包sass的背景图，图片地址不对

Question

问题：sass文件使用background-image设置背景图后，在浏览器发现图片无法显示出来
下面是我的 webpack 配置：

{
  test: /\.(svg|png|jpe?g|gif)(\?.*)?$/i,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 1024 * 30,
      fallback: 'file-loader',
      name: utils.assetsPath('imgs/[name].[hash:7].[ext]'),
      exclude: resolve('node_modules'),
      esModule: false
    },
  }]
}

直接在 tsx 里用 img 标签引入图片就没有问题，代码如下

import imag from '@/assets/imgs/image.png'
<img src={imag} alt="" /> 

可以看到 地址是 /static/imgs 起始的，

但是使用背景图

 background: url("@/assets/imgs/image.png");

图片地址不一样，也无法加载

附上我的 sass 配置

{
  test: /\.s[ac]ss$/i,
  use: [ 
    "style-loader",
   {
     loader: 'css-loader',
     options: {
       modules: true /* css-module */
   },
   {
    loader: "sass-loader",
    options: {
      additionalData: `
        @import '@/assets/styles/var.scss';
        `,
      sassOptions: {
        includePaths: [__dirname]  //基于当前目录
      },
    },
  }]
}

求帮看看 好奇怪啊