新建的react我的项目,并且webpack配置是本人自定义的。
一开始这样引入,报
GET http://localhost:3000/assets/logo192.png 404 (Not Found)
:<img src='./assets/logo192.png' alt="logo"/>
而后在网上搜寻一番,用了require语法引入,而后就报这个谬误
GET http://localhost:3000/[object%20Module] 404 (Not Found)
:<img src={require('./assets/logo192.png')} alt="logo" />
- 原来是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图片文件时图片加载失败