我有一个使用 webpack 和 React 的项目。我使用 file-loader / url-loader 在 webpack/react 设置中使用图像。在我的 React 项目中，我这样做了import Img from '/image/source/image.jpg'，但是如果尝试<img src={Img}>src 是一个 Base64 代码module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg";，并且没有显示图像。我怎样才能解决这个问题？

webpack.config.js

var webpack = require( 'webpack' )
var path = require( 'path' )

var BUILD_DIR = path.resolve( __dirname, 'src/client/public' );
var APP_DIR = path.resolve( __dirname, 'src/client/App' );

var config = {
  mode : 'development',
  entry : APP_DIR + '/index.jsx',
  output : {
    path : BUILD_DIR,
    filename : 'bundle.js'
  },

  devServer …

当我尝试通过按钮更改页面时,我遇到了React的问题(但是)控制台给了我:

元素类型无效:期望一个字符串(对于内置组件)或>一个类/函数(对于复合组件)但得到:undefined.您>可能忘记从其定义的文件中导出组件.

但是当我把onClick代码放在类代码中时,它显示了jsx代码.所以它有效,但为什么我仍然得到错误？这是我的代码:

import React from 'react';
import {render} from 'react-dom';

//sass
require('../sass/style.scss');

var pages = ['Qrscan'];
var jsx = [<Qrscan />];

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {target: <Menu />};
        App.changePage = App.changePage.bind(this);
    }

    static changePage (tar) {
       this.setState({target: tar});
    }

    render () {
        return (
          this.state.target
        )
    }
}


//Rendering
class Menu extends React.Component {
    render() {
        return (
            <div id="root">
                <Header />
                <div className="container">
                    <But target="Qrscan" class="button button-QR" text="Use QR …