引入图片资源404显示 [object%20Module] 404 (Not Found)

新建的react项目，并且webpack配置是自己自定义的。

1. 一开始这样引入，报GET http://localhost:3000/assets/logo192.png 404 (Not Found)：

   <img src='./assets/logo192.png' alt="logo"/>

2. 然后在网上搜索一番，用了require语法引入，然后就报这个错误GET http://localhost:3000/[object%20Module] 404 (Not Found):

   <img src={require('./assets/logo192.png')} alt="logo" />

3. 原来是webpack配置的问题

在url-loader内部封装了file-loader而file-loader在新版本中esModule属性默认为true 即默认使用ES模块语法导致了引用图片文件的方式和以前的版本不一样,引入路径改变了，自然找不到图片。

下面是修改webpack配置

{
        test: /\.(jpe?g|png|gif)$/i, // 图片文件
        use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10240,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[contenthash:8].[ext]',
+              esModule: false
            }
          },
+          esModule: false
        }
      }
    ],
    exclude: /node_modules/
}

【参考】
React 加载本地图片
在使用Webpack打包本地img图片文件时图片加载失败