新建的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-loaderfile-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图片文件时图片加载失败