reactjs - 使用 Webpack 在 React 应用程序中未加载图像

Question

我正在尝试使用 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,
      publicPath: '/public/'
    },
...
{
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },

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

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

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

标签： reactjswebpack