关于react.js:引入图片资源404显示-object20Module-404-Not-Found

36次阅读

共计 684 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完