使用React/WebPack加载图像

Question

   {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
    }

  importAll = (r) => {
    return r.keys().map(r);
  }

  render() {
    const pca_images = this.importAll(require.context('../public/images/pca', 
    false, /\.(png|jpe?g|svg)$/));
      console.log('pca_images')
      console.log(pca_images)
...
}

当我启动应用程序时，我没有看到任何错误，但是pca_images是一个空数组。组件本身位于app_folder/views/。我试着直接加载图像：

 <img src={ require('../public/images/image1.png') } />

但无论我指定的路径是什么，如果出现错误，它就不能正常工作了。但是，我需要从app_folder/public/images/pca文件夹加载所有图像，而不是静态加载，因为我事先不知道图像的名称。如有任何建议，将不胜感激。

Answer 1

对我有效的解决方案是将规则添加到webpack.config.js:

{
    test: /\.(jpe?g|gif|png|svg)$/i,
    use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }
  ]
}

我在这里找到的规则是：公用文件夹中的ReactJS和图像

然后我需要在TERMINAL中运行两个命令：

npm install url-loader --save-dev
npm install file-loader --save-dev