使用Webpack无法在React应用中加载图像

如何解决使用Webpack无法在React应用中加载图像

我正在尝试使用Webpack在一个简单的React应用程序中加载本地图像。我将图片加载为：

const DogImage = require('../../public/dog.jpg');
const Image = () => {
...
<img src={DogImage} width="100px"/>
}

我的webpack配置包括以下内容：

output: {
      filename: 'widget.js',path: path.resolve(bundleOutputDir),publicPath: '/public/'
    },devServer: {
      contentBase: bundleOutputDir,...
{
          test: /\.(png|jpe?g|gif)$/i,use: [
            {
              loader: 'file-loader',},],

在构建应用程序时，我在dist文件夹中获得了名为8ce03579ff1756938e787945c032a0a3.jpg的图像文件，当我进行console.log图像时，我得到了：

它在屏幕上显示，带有HTML缺少文件图标。图片肯定在正确的路径中，因为如果路径与图片不匹配，我将无法构建图片。

如果您有任何想法或可以提供更多信息，请告诉我！谢谢