无法使用require和webpack显示本地图像

Question

我正在努力在我的反应应用中显示本地图像。我使用require（）函数在render方法中调用图像，如下所示：

<img src={require('../../assets/svg/ic_planning.svg')} />

甚至不能导入图像，例如：

import icon from '../../assets/svg/ic_planning.svg'
<img src={icon} />

在我的webpack.config.js上，我有以下图像加载规则：

{
    test: /\.(jpg|png|svg)$/, 
    loader: 'url-loader',
    options: { limit: 10000 }
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader', 
    options: { } // name: '[path][name].[hash].[ext]' 
},

已经安装了url-loader和文件加载器依赖项。我在文件加载器选项中有名称选项，但我评论它进行测试，没有成功。甚至没有jpg图像显示。

Webpack正在构建没有错误输出的图像，并且chrome上的开发控制台中没有显示错误，但我仍然在页面上显示未加载的图像图标。我知道2年前有一个类似的question，在我看来，我做了我应该做的一切来加载本地图像。

如果有帮助，这是webpack日志：

我不确定其他信息可能有助于弄清楚发生了什么，所以让我知道我需要在这里发布什么。提前感谢您提供任何帮助。

Answer 1

您使用的是哪个版本的Webpack？如果您使用3或4，请尝试此配置。这对我有用。

{ test: /\.(png|jpg|svg)$/, use: [{ loader: 'url-loader', options: { limit: 
8192 } }] }