在 png 图像中找不到 Webpack 导出答案

【问题标题】：Webpack export not found in png image在 png 图像中找不到 Webpack 导出
【发布时间】：2021-01-17 01:13:18
【问题描述】：

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

import { Logo } from './../../Logo.png';

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

<img src={ Logo } alt="Logo" />

我收到此错误：

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

我在网上尝试了很多解决方案，但没有一个能解决我的问题。这是我的 webpack 配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "[name].js"
    },
    plugins: [htmlPlugin],
    module: {
        rules: [
        {
            test: /\.(png|jpg|jpeg|gif|ico)$/,
            use: [{
                // loader: 'url-loader'
                loader: 'file-loader',
                options: {
                    name: '[name].[hash].[ext]'
                }
            }]
        }, {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'file-loader',
            options: {
                name: '[name].[hash].[ext]'
            }
        },
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.s?css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]
    }
};

是的，我确信这是文件的好路径。提前感谢您帮助我。

【问题讨论】：

标签： node.js reactjs image express webpack

【解决方案1】：

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

import Logo from './../../Logo.png';

来自 Webpack 的文档：https://webpack.js.org/guides/asset-management/

来自 create-react-app 的文档：https://create-react-app.dev/docs/adding-images-fonts-and-files/

【讨论】：