javascript - Logo 图像无法在 React 应用程序中呈现。模块解析失败

Question

我有一个矩形组件。我正在尝试在组件中渲染图像。我在尝试加载 Logo 并将其呈现到组件中时遇到问题。我遇到了解析失败，我不确定为什么会收到此错误:

Uncaught Error: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at eval (splittlogo_logo_transparent.png:1)
    at Object../client/dist/splittlogo_logo_transparent.png (bundle.js:96)
    at __webpack_require__ (bundle.js:20)
    at eval (topbar.jsx:13)
    at Object../client/src/components/topbar/topbar.jsx (bundle.js:120)
    at __webpack_require__ (bundle.js:20)
    at eval (App.jsx:13)
    at Object../client/src/components/App.jsx (bundle.js:108)
    at __webpack_require__ (bundle.js:20)
    at eval (index.jsx:9)

这是我的代码:

import React, { Component } from 'react';
import Logo from '../../../dist/splittlogo_logo_transparent.png'

export default class TopBar extends Component{
    constructor(props){
        super(props),
        this.state = {
          product:"",
        }
      }

    userSearch(e){
        console.log(e.target.value)
    }

    render(){
        return(
            <div className="topbar-coutainer">
                <div className="logo-container">
                    <img src={Logo} alt=""/>
                </div>
                <div>
                    <input onChange={(e) => {this.userSearch(e)}} type="text" name="search" />
                </div>
            </div>
        )
    }
}

logo的路径是正确的

这是我的网络包:

const path = require("path");
const webpack = require('webpack')
require("fs")

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./client/src/"),
  output: {
    path: path.resolve(__dirname, "./client/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js[x]?/,
        exclude: /node_modules/,
        options: {
          presets: ["react", "env"]
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: '[hash:base64]'
            }
          }
        ]
      }
    ], 
  },
  node: {
    fs: 'empty'
  },

  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.HOSTNAME': JSON.stringify("localhost"),
      'process.env.PORT': JSON.stringify(1111),
    })
  ]
};

现在我的 webpack 应该可以正常工作了，因为我在不同的项目上使用相同的 webpack 配置，并且它可以在我需要的地方正确显示图像。

Answer 1

问题是你的 webpack 配置没有设置加载图像，所以当它试图解析 .png 时，它死了。您应该为 file-loader 配置一个规则:

 {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {},
      },
    ],
  }

...或类似的。

Now My webpack should be working properly because I am using the same webpack configuration on a different project and it is properly displaying images where I need it to.

不知道如何回答这个问题，只能说这似乎不可能，因为这个 webpack 配置根本不会处理图像。