Question

我在webpack中设置了规则以加载png张图片：

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

我在这里找到的：cannot load png files with webpack, unexpected character

Webpack似乎工作正常，没有出现任何错误。因此，我尝试在app_folder/public/images/pca方法内加载位于render的png图像路径：

  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 and images in public folder

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

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

最后从文件夹中加载（请参阅问题render方法）开始工作。

使用React / Webpack加载图像

1 个答案: