关于react.js:引入图片资源404显示-object20Module-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图片文件时图片加载失败