Javascript <；中.jpg的模块解析失败；img>；反应组分？

我想在我的网站上显示一个图像，我正在使用react构建。以下是组件源代码：

import React, { Component } from 'react';
import style from './styles/AboutMeStyle.css';

export default class AboutMe extends Component{
    render(){
        return (
            <div>
                <img src={require ('./images/ProfilePic.jpg')}align="middle"/>
            </div>
        );
    }
}

我写错代码了吗？还是我错过了一个模块？我已经安装了image webpack loader，但它似乎没有任何作用…这是我的webpack.config.js：

module.exports = {
    entry: './client/index.js',
    output: {
        path: __dirname + '/public/js',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    stats: {
        colors: true,
        reasons: true
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loaders: ['babel']
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    }
}

---

require

用于导入javascript代码。您可能需要以下内容：

<img src="/images/ProfilePic.jpg" align="middle"/>

它将从您的公共图像文件夹中读取。仔细观察您的终端，我发现您的图像位于

组件

文件夹中。通常，除了javascript组件之外，您还希望在公共目录中有一些图像/其他资产文件夹

Webpack将把所有代码编译成一个包，您的Web服务器将公开根目录下的公共文件

---

有关更多信息，请参阅。

请用实际错误消息替换图像。这将有助于使这个问题更易于搜索。完成。将图像替换为文本谢谢！将图像移动到/public/images文件夹成功！

<img src="/images/ProfilePic.jpg" align="middle"/>