Load images using React/Webpack - reactjs

Question

I set up the rule in webpack to load png images:
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
That I found here: cannot load png files with webpack, unexpected character
Webpack seems to be working fine, giving no errors. So, I tried loading the png images paths that are located at app_folder/public/images/pca inside the render method:
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)
...
}
When I launch the app I do not see any errors but the pca_images is an empty array. The component itself is located at app_folder/views/. I tried loading the images also directly like that:
<img src={ require('../public/images/image1.png') } />
But whatever path I specify, it is just not working giving an error. I need to load all images from the folder app_folder/public/images/pca though, not just statically since I do not know the names of the images beforehand. Any suggestions would be greatly appreciated.

Answer 1

The solution that worked for me was to add the rule to the webpack.config.js:
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
This rule I found here: ReactJS and images in public folder
Then I needed to run two commands in terminal:
npm install url-loader --save-dev
npm install file-loader --save-dev
And finally loading from the folder (see the question, render method) started working.