Node.js 在png图像中找不到网页包导出

我试图在Webpack、ReactJS、Babel、Express和Sass下创建一个网站，到目前为止，所有这些都运行良好，但当我尝试导入这样的图像时：

从“/../../Logo.png”导入{Logo}；

并在这样的图像中使用它：

我得到了这个错误：

./src/components/Header/Header.js 7:9-13
"export 'Logo' was not found in './../../Logo.png'

我在网上尝试了很多解决方案，但都没有解决我的问题。 这是我的网页包配置：

const HtmlWebPackPlugin=require（“html网页包插件”）；
const path=require（'path'）；
const htmlPlugin=新的HtmlWebPackPlugin({
模板：“./src/index.html”，
文件名：“./index.html”
});
module.exports={
条目：“./src/index.js”，
输出：{
path:path.join（uu dirname，'dist'），
文件名：“[name].js”
},
插件：[htmlPlugin]，
模块：{
规则：[
{
测试：/\（png | jpg | jpeg | gif | ico）$/，
使用：[{
//加载器：“url加载器”
加载器：“文件加载器”，
选项：{
名称：'[name].[hash].[ext]'
}
}]
}, {
测试：/\（woff（2）| ttf | eot | svg）（\？v=\d+\.\d+\.\d+）$/，
加载器：“文件加载器”，
选项：{
名称：'[name].[hash].[ext]'
}
},
{
测试：/\（js|jsx）$/，
排除：/node_模块/，
使用：{
加载器：“巴别塔加载器”
}
},
{
测试：/\.s？css$/,，
用法：['style-loader'，'css-loader'，'sass-loader']
}]
}
};

是的，我相信这是找到文件的好途径。

---

提前感谢您的帮助。

您应该导入不带花括号的图像：

从“/../../Logo.png”导入徽标

来自网页包的文档：

创建react应用程序的文档：