Reactjs中map遍历渲染组件时图片无法正确映射加载问题

当项目中使用的webpack资源加载器（file-loader/url-loader等）默认开启ES模块导出规则时，require() 引入图片资源返回的是一个ES模块对象，资源真实路径存储在该对象的default属性下，直接将返回值赋值给img的src属性就会出现[object Module]的异常显示。

方案1：直接访问default属性（临时适配，无需修改打包配置） #

修改传入BookComponent的src属性代码即可：

src={require("./assets/images/" + book.image + ".png").default}

方案2：修改打包配置关闭ES模块导出（全局生效） #

在webpack配置中找到图片资源对应的loader规则，添加esModule: false配置即可，参考示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false, // 关闭ES模块导出
            },
          },
        ],
      },
    ],
  },
};

配置生效后无需再加.default，直接使用原有require写法即可正常获取图片路径。

内容的提问来源于stack exchange，提问作者Eugene Martynov