Webpack 试图通过网页包加载图像

我正试图通过文件加载器或url加载器，使用webpack在React应用程序中显示图像。但到目前为止，我只看到了文件名，没有看到图像

以下是我的webpack.config.js的相关部分：

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

下面是my.jsx模块顶部的导入：

从“../../../assets/images/library.png”导入MyImage

然后在渲染中，我有以下内容：

{MyImage}

但由于某些原因，应用程序显示的是文件名而不是图像

---

具体来说，webpack首先似乎将文件名更改为不同的名称（f6273e549cbb9241d47952347b094df7.png），它显示在创建的bundle.js旁边。但是页面上呈现的是文件名，作为文本字符串，而不是实际图像（lol）。如何显示图像而不是奇怪的替代文件名？

默认情况下，生成的图像名将是

[contenthash].[ext]

，如何显示轮廓。此外，最好将文件放在单独的文件夹中：

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

通过这种方式，您可以使事物彼此分离（图像、字体等）。正确的用法是：

import MyImage from 'app/imgages/logo.png'

<div>
    <img src={MyImage} />
</div>