webpack浏览器控制台html里img后src为“[object Module]”问题

tsx引入的图片用了‘@’别名

const SiderNav = () => {
  return (
    <div style={{ height: '100vh', overflowY: 'scroll' }}>
      <div style={styles.logo}>
        <img
          style={{ width: '115px', height: '22px' }}
          src={require("@/assets/images/logo.png")}
        />
      </div>
    </div>
  )
}

发现本地运行后html里面，img的src为[object Module]

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true，因此手动设置为false

{
    test: /\.(woff|woff2|ttf|eot|svg|jpe?g|png)(\?v=\d+\.\d+\.\d+)?$/,
    loader: require.resolve('url-loader'),
    options: {
      esModule: false,
    },
},