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

我在这里发现：无法用webpack加载png文件，意外字符

Webpack似乎运行良好，没有出现任何错误。因此，我尝试在render方法中加载位于app_folder/public/images/pca的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和公用文件夹中的图像

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

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

最后从文件夹加载(见问题，render方法(开始工作。