Загрузка изображений с помощью React / Webpack

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'
    ]
    }

То, что я нашел здесь: не может загрузить файлы png с веб-пакетом, неожиданный символ

Webpack, кажется, работает нормально, без ошибок.Итак, я попытался загрузить пути изображений png, которые расположены в app_folder/public/images/pca в методе render:

  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 и изображения в общей папке

Затем мне нужно было запустить две команды в терминале:

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

И, наконец, загрузка из папки (см. Вопрос, render метод) начала работать.