Webpack 捆绑了 PNG 图像，但 React 不会显示它

Question

正如标题所说，webpack 构建无怨无悔。而且我可以看到图像文件已被复制到捆绑输出 dist 目录，所以大概配置的 test 部分至少是正确的。

但是网页无法定位，只是一个破损的图片方块。我一定已经阅读了大约 15 个现有的 SO 帖子，但我在这里。我已经尝试了 import 版本和 require 版本：

import red_light from './red_light.png';

... 或者...

const red_light = require('./red_light.png');

和

<img src={red_light} />

两者都未能找到图像并将其加载到页面上。

也尝试在 JSX 中直接要求：

<img src={require('./red_light.png')} />.

也失败了。

Webpack 规则配置：

...
rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {loader: "babel-loader"}
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: false
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        // options: {
        //   name: '[path][name].[ext]',
        // },
      },
    ]
...

我不知道是什么原因导致我的设置无法正常工作。

这对我来说似乎很有趣：在浏览器中检查发出的 html 时，它只显示 src=[Object module] 而不是任何 URL。也许这是正常的。当我悬停鼠标时，它只会显示 'Could not load the image'.

编辑：我发现它可以在 dev 模式下工作，但不能在 prod 模式下工作，即当一切都在 RAM 中时一切正常，但是如果我执行 npm run build 它会将图像发送到配置的 webpack 输出目录的（sub-directory），但是相对导入似乎无法在目标 index.bundle.js。 prod html 文件当然可以导入发出的 js 索引文件，因为页面已加载。我不明白为什么 webpack 没有足够的信息来配置正确的相对导入，因为 i) 它自己发出 png 文件和 ii) 它可以看到反应源代码并知道每个组件相对于相应入口点的位置.基本上让它工作它看起来像在 prod 我必须将 png 文件导入反应文件但是对于 img 标签内的 src 属性，手动写入相对路径作为外部文件.

url-loader 工作正常，但是，因为在 target 和 src 中没有混淆相对导入的矢量。

Answer 1

应该是这样的

{
  test: /\.(jpe?g|png|gif)$/i,
  loader: "file-loader"
},

您可以查看我的完整配置here

更新：通常 webpack 会像这样尝试搜索配置中输出目录中的文件

output: {
    path: path.resolve(__dirname, "wwwroot/dist"),
    filename: "[name].js",
    publicPath: "/dist/"
},

因此它将在 wwwroot 文件夹中查找文件

Webpack 捆绑了 PNG 图像，但 React 不会显示它

Webpack bundles PNG image but React won't display it

javascript

bundle

node.js

reactjs

webpack